Debugging CSS in Internet Explorer 6 and 7 requires the use of some repeated patterns that you've surely encountered or used during the development of a web site. The aim of this post is to provide a simple reference for the most common patterns used with Internet Explorer (also called hacks).
| Pattern | Description |
|---|---|
height: 100%height: 1px |
In IE6 this pattern fixes floats, positioning, margin collapsing, float containment and it's usually applied to the affected element or its nearest ancestor. It should not be used on list items, because it causes rendering problems with list markers. |
min-height: 100%min-height: 1px |
IE7 only. Same as above, but with some differences. |
display: inline |
In IE6 this pattern is applied to floats with a margin that goes in the same direction of the floating direction. It prevents IE6 from doubling that margin. |
zoom: 1 |
This patterns fixes some rendering problems with inline elements, such as bugs with background images. It's usually used together with display: inline |
background-position: 0 0 |
In IE6 this pattern is applied to links that have a child element that must be styled on :hover. It's used when IE6 doesn't honor the specified styles. |
overflow: hidden |
IE7 only. This pattern fixes some bugs related to the hasLayout property. |
References
- On Having Layout: the
hasLayoutproperty of IE6 and 7 - Position Is Everything: IE's bugs explained