Updated: 20090826 **ESSENTIAL HACKS!** Targeting all EXCEPT IE5/Mac Only: /*\*//*/ selector { property: value; } /**/ * html>body selector { property: value; } Targeting all EXCEPT IE6-7/Win Only: /*\*/ * html selector { property: value; } /**/ Targeting all EXCEPT IE5.x/Win Only: selector { property/**/:/**/ value; } Targeting all EXCEPT IE5.5/Win Only: * html selector { property: value; p\roperty: normal-value; } selector { property: value; p\roperty: normal-value; } Targeting all EXCEPT IE5.5-6/Win Only: * html selector { property/**/: value; } Targeting all EXCEPT IE<7: html>body { property: value; } Targeting all EXCEPT IE5-7: html>/**/body { property: value; } Targeting all EXCEPT Opera7+ Only: @media all and (min-width: 0px) { selector { property: value; } } Targeting Only IE5/Mac: /*\*/ selector { property: value; } /**/ @media all { selector { property: value; } } Targeting Only IE6-7/Win: html>body selector { property: value; } Targeting Only IE6/Win: selector { property /**/: value; } Targeting Only IE5.5/Win: selector { property: /**/value; } Targeting Only IE<7/Win: selector { _property: value; } Targeting Only IE5-7/Win: selector { ~property: value; } *:first-child+html selector { property: value; } * html selector { property: value; } Targeting Only IE7/Win: *:first-child+html selector { property: value; } Targeting Only IE8/Win: selector { property /*\**/: value\9 } selector { property: value\9 } Targeting Only Opera<=9: html:first-child selector { property: value; } !important HACK: #container { height: auto !important; // major browsers other than IE 6 and below respect the importance height: 50px; // IE 6 and below use this value instead since it ignore importance if property is later redefined } IE6-7 MIN-HEIGHT FIX: div { min-height: 500px; height: auto !important; height: 500px; } BOX-MODEL HACK IE<6: div { padding: 2px; border: 1px solid green; width: 20px; width/**/:/**/ 14px; // hidden from IE5.x } IE MIN-WIDTH HACK: #container { min-width: 600px; max-width: 1200px; width: expression(documentElement.clientWidth < 600 ? "600px" : documentElement.clientWidth > 1200 ? "1200px" : "auto"); } IE RESIZABLE DIVS HACK: #container { width: 80px; // IE reads as min-width height: 35px; // IE reads as min-height } html>body #container { // setting resizable for IE7 and Mozilla width: auto; height: auto; min-width: 80px; min-height: 35px; } TEXT/CONTENT OVERFLOW IN IE (mishandling of 'width' property as 'min-width'): - make sure text/content doesn't spill out of the box element in all browsers... so allow to auto resize #container { width: 40px; } html>body #container { width: auto; min-width: 40px; } CENTERING FIXED-WIDTH PAGE IN WINDOW: body { text-align: center; } #container { width: 770px; margin: 0 auto; // gives our element an automatic margin on the left and right to position in center text-align: left; } SHORTHAND METHODS: font: bold italic small-caps 1em/1.5em verdana,sans-serif; margin: top, right, bottom, left; margin: top, (right and left), bottom; margin: (top and bottom), (right and left); margin: all; CONDITIONAL COMMENTS: ... - IE any version of IE - lt IE $ver all versions < $ver - lte IE $ver all versions <= $ver - IE $ver only version $ver - gte IE $ver all versions >= $ver - gt IE $ver all versions > $ver - $var can be 5, 5.5, 6, or 7 VERTICAL-ALIGN HACK: - set the line-height to be the same as the height of the box div { height: 20px; line-height: 20px; } POSITIONING WITHIN A CONTAINER: #container { position: relative; } #innerdiv { position: absolute; left: 30px; top: 5px; }