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.
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 28 IE7 bugs and 19 IE8 bugs.
In tutorials you'll see phrases such as "Affected: IE8 and all below" or "Fixes: all versions". By "all" I mean IE7 and IE8. IE5 and IE5.5 are history and this site does not consider those versions in the tutorials and solutions.
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 | <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 | Floated elements that follow other floated elements and have `clear` set do not shrink-wrap correctly |
| Document Scrollbars Overflow Inconsistency | IE7 | 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 | A gap appears between last and second last floated elements that are stacked vertically. |
| Float Squeeze Duplicate Last Character Bug | IE7 | Last character of a floated element is duplicated. |
| Empty Element Height Bug | IE7 | Empty elements that have "layout" obtain height |
| Form Control Double Margin Bug | IE7 | 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 | 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 | 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 |
| PNG Image and Background Color Mismatch | IE8, IE7 | 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 | 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 !important Rule Ignore Bug | IE8 | rules inside :first-letter pseudo-class are completely ignored when !important modifier is used |
| Partial Click Bug v2 | IE7 | only text is clickable/reactant to :hover on links [(optional) until the mouse cursor rolls over the actual text] |
| Staircase Bug | IE7 | Floated elements stack up like a staircase |
| noscript Ghost Bug | IE8, IE7 | <noscript> elements shows up when scripting is enabled; only borders/background is showing from it |
| No Transparency Click Bug | IE8, IE7 | 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 | The numbers on <ol> elements do not increase on subsequent <li>s |
| No Bullets on <ul> and <ol> Bug | IE7 | Bullets/numbers disappear from <ul> and <ol> elements |
| No line-height Vertical Center on Images Bug | IE7 | Images are not vertically centered using line-height method |
| No Background Image Bug | IE8, IE7 | No background appears in IE when background image is used (using `background` shorthand property) |
| Custom Cursor Bug | IE8, IE7 | custom cursors do not appear in IE |
| Negative Margin Bug | IE7 | Part of the element that is outside the container disappears when negative margins are used |
| Text-Align Bug | IE7 | text-align property affects block-level elements |
IE bugs that are caused by elements having or not having "layout"
| Bug Name | Affected Versions | Description |
|---|---|---|
| Scared of Floats Bug | IE7 | elements with layout clear floats instead of going around floated elements |
Various workarounds producing effect of properties and property values which are not implemented in IE.
| Workaround Name | Affected Versions | Description |
|---|---|---|
| Opacity | IE8, IE7 | opacity property is not supported |