CSS: Internet Explorer debugging patterns

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).

Most used patterns with Internet Explorer

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

1. On Having Layout: the hasLayout property of IE6 and 7
2. Position Is Everything: IE's bugs explained