【转】IE浏览器CSS BUG集锦

Internet Explorer CSS Bugs

Overview

Internet Explorer is famous for not supporting many of CSS properties as well as contaning numerous bugs in the ones it supports.

This page lists problems in Internet Explorer, samples demontrating them as well as solutions where such are known.

Even though I've tried to classify the bugs based on their nature, many bugs can be classified under several sections in which case the bug will appear only under General Bugs section.

Stats

Currently the site contains 46 "General Bugs" tutorials, 5 "hasLayout Bugs" tutorials, 6 "No Support Workarounds"tutorials and 1 "Crash Bugs" tutorials; all that totals to 58 tutorials and 70 solutions.

Latest tutorial was published on: Wed Aug 19 15:38:47 2009.

The site contains 44 IE6 bugs, 28 IE7 bugs and 19 IE8 bugs.

Note on Versions

In tutorials you'll see phrases such as "Affected: IE8 and all below" or "Fixes: all versions". By "all" I mean IE6, IE7 and IE8.IE5 and IE5.5 are history and this site does not consider those versions in the tutorials and solutions.

General Bugs

This section contains IE bugs that don't quite fit into other section or can be classified into two or more sections at the same time.

Bug Name	Affected Versions	Description
Image Label Focus Bug	IE8, IE7, IE6	<img> elements that are inside <label> elements, when clicked, do not cause the focus to be transfered to corresponding form control.
No Auto-Margin Center on Buttons Inconsistency	IE8	Button-like elements do not get centered when { display: block; margin-left: auto; margin-right: auto; } applied on them and `width` is not explicitly set
Incorrect Float Shrink-Wrap Bug	IE7, IE6	Floated elements that follow other floated elements and have `clear` set do not shrink-wrap correctly
Document Scrollbars Overflow Inconsistency	IE7, IE6	Unconventional default value for `overflow` on <html> element that may appear as a bug with regard to `overflow` on <body>.
Float Squeeze Weird Gap Bug	IE7, IE6	A gap appears between last and second last floated elements that are stacked vertically.
Float Squeeze Duplicate Last Character Bug	IE7, IE6	Last character of a floated element is duplicated.
Empty Element Height Bug	IE7, IE6	Empty elements that have "layout" obtain height
Form Control Double Margin Bug	IE7, IE6	horizontal margins on <input> and <textarea> elements are "inherited" from the ascendant with a margin and "layout"
IE7 1px Dotted Border Appears As Dashed Bug	IE7	1 pixel dotted border appears as dashed when at least one of the border sides is styled of a width larger than 1px
Relative Overflow Failure Bug	IE7, IE6	Elements with `overflow` set to either `hidden` or `auto` behave as if overflow was set to `visible` when descendants that are causing overflow have position: relative set on them
IE7 "Broken" :hover Absolute Bug	IE7	:hover that changes left/top offsets of an absolutely positioned descendant does not appear to "work" if the element is hidden out of the view; if it's visible, the left/top offsets do not change on :hover
Button Background Shift On :active Bug	IE8	Background shifts up and to the left on :active state when applied to <button> or <input type="submit">
Ignored :focus Bug	IE8	A ruleset, selector of which contains :focus that is followed by another simple selector, is ignored
Invisible Hover Border Bug	IE8	Bottom border on :hover state either does not appear completely or is 1 pixel short (or cancels out outline) when outline is set
Percentage Padding Margin Bug	IE8	Vertical margins appear to collapse upon a specific combination of vertical padding set in percentages as well as border or padding set on the parent's parent
Image Float Bullet Chaos Bug	IE8	Incorrect position or no rendering at all of list markers (bullets) when list items have floated images
Non-Inherited TH Text-Align Bug	IE8	text-align value of ascendant isn’t inherited by the TH element
32 Styles Limitation	IE8, IE7, IE6	Styles are ignored when they are set in the 32nd (or later) style method (i.e. <style>, <link> or @import)
Hover White Background Ignore Bug	IE7	background does not change on :hover
IE7 Child Selector Comment Bug	IE7	A selector containing child selector that is followed by a comment is ignored
Star HTML Bug	IE6	* html selector is not ignored in IE6 (due to unversal selector being ignored when it's the first part of the selector)
IE6 !important Ignore Bug	IE6	!important keyword is being ignored when the same rule is set again later in the same ruleset
PNG Image and Background Color Mismatch	IE8, IE7, IE6	Colors specified in CSS differ from the ones used in PNG images despite having the same color code
No Auto Margin Center Pseudo-Bug	IE8, IE7, IE6	side margins set to value `auto` do not center a block-level element
:first-line !important Rule Ignore Bug	IE8	rules inside :first-line pseudo-class are completely ignored when !important modifier is used
:first-letter Ignore Bug	IE6	The entire :first-letter ruleset is ignored
:first-letter !important Rule Ignore Bug	IE8	rules inside :first-letter pseudo-class are completely ignored when !important modifier is used
Partial Click Bug v2	IE7, IE6	only text is clickable/reactant to :hover on links [(optional) until the mouse cursor rolls over the actual text]
Staircase Bug	IE7, IE6	Floated elements stack up like a staircase
Disappearing List Background Bug	IE6	Background on <li>, <dt>, <dd> disappears
noscript Ghost Bug	IE8, IE7, IE6	<noscript> elements shows up when scripting is enabled; only borders/background is showing from it
No Transparency Click Bug	IE8, IE7, IE6	transparent areas of background image on links is not clickable when `filter` is used to fix PNG transparency
List Drop Shift Bug	IE8	Stuff in <li>s drops down below the bullet
No Increase on <ol> Numbers Bug	IE7, IE6	The numbers on <ol> elements do not increase on subsequent <li>s
No Bullets on <ul> and <ol> Bug	IE7, IE6	Bullets/numbers disappear from <ul> and <ol> elements
No line-height Vertical Center on Images Bug	IE7, IE6	Images are not vertically centered using line-height method
No Background Image Bug	IE8, IE7, IE6	No background appears in IE when background image is used (using `background` shorthand property)
Custom Cursor Bug	IE8, IE7, IE6	custom cursors do not appear in IE
Leaking Background Bug	IE6	Background leaks out from the element onto other elements that are next in the flow.
Expanding Height Bug	IE6	Element is longer than the specified height (mostly applies to small heights).
Expanding Width Bug	IE6	Element is wider than the specified width.
Double Margin Bug	IE6	Left and right margins are doubled on floated elements.
Negative Margin Bug	IE7, IE6	Part of the element that is outside the container disappears when negative margins are used
Italics Float Bug	IE6	Element drops below floated element with italized text.
3px Gap Bug aka Text Jog Bug	IE6	Elements next to a floated one either have a three pixel gap or drop below or keep shifting when several elements are floated.
Text-Align Bug	IE7, IE6	text-align property affects block-level elements

hasLayout Bugs

IE bugs that are caused by elements having or not having "layout"

Bug Name	Affected Versions	Description
Scared of Floats Bug	IE7, IE6	elements with layout clear floats instead of going around floated elements
Border Chaos Bug	IE6	borders displayed chaotically; e.g. drawn where not should be or missing
Sub-Hover Bug	IE6	Rules with selectors such as a:hover foo{} do not "work"
Partial Click Bug	IE6	Only text is clickable on links (<a>) that are styled with display: block and thus have extra clickable area in standard compliant browsers
Disappearing Content Bug	IE6	Some content disappears and reappears on scrolling or window transformation as well as minimizing and maximazing of the window.

No Support Workarounds

Various workarounds producing effect of properties and property values which are not implemented in IE.

Workaround Name	Affected Versions	Description
No Child Selector Support Workaround	IE6	Child selector is ignored
Max-Height Workaround	IE6	max-height is not supported
Max-Width Workaround	IE6	max-width is not supported
Opacity	IE8, IE7, IE6	opacity property is not supported
Min-Width Workaround	IE6	min-width property is not supported
Min-Height Workaround	IE6	min-height property is ignored

原文来自 http://haslayout.net/css/