Safe IE6 IE7 IE8 IE9 CSS Hacks Tutorial
Of course it's always safest to use IE Conditional Comments. But if you wish to use a hack instead, these are the safest hacks you'll find. By safe I mean the targeted browser will foreseeably never change the way it renderers said css rule. The reason one would prefer to use a hack over IE CSS's is because this individual prefers to maintain only one css stylesheet. I also prefer to only maintain one stylesheet. As of todays date, I have let go of IE6/7. So the only browsers I have to hack is IE8/9. IF I had to choose one method it would be Method 1 as it's the cleanest and safest in my eyes. NOTE: order matters, so don't change it. As of IE 10, IE will no longer support, and therefore not render/read, IE Conditional Comments.
Method 1
*html #one { /* IE6 */
color:purple;
}
*+html #one { /* IE7 */
color:green;
}
#one { /* IE8 */
color:blue;
}
:root #one { /* IE9 */
color:pink\9;
}
:root #one { /* Modern Browsers */
color:red;
}
Method 2
#two li { /* All Browsers */
color:black;
}
*+html #two li+li { /* IE7 */
color:green;
}
#two li+li { /* IE8 */
color:blue;
}
#two li+li+li { /* ALL Browsers Except IE6 */
color:black;
}
#two li:nth-child(2) { /* Modern Browsers */
color:red;
}
Method 3
*html #three { /* IE6 */
color:purple;
}
*+html #three { /* IE7 */
color:green;
}
#three { /* IE8 */
color:blue;
}
:root #three { /* IE9 */
color:pink\9;
}
body:last-child #three { /* Modern Browsers */
color:red;
}
Method 4
*html #four { /* IE6 */
color:purple;
}
*+html #four { /* IE7 */
color:green;
}
#four { /* IE8 */
color:blue;
}
:not(notIE) #four { /* Modern Browsers */
color:red;
}
Method 5
*html #five { /* IE6 */
color:purple;
}
*+html #five { /* IE7 */
color:green;
}
#five { /* IE8 */
color:blue;
}
:root #five { /* IE9 */
color:pink\9;
}
#nonexistantID:last-child, #five { /* Modern Browsers */
color:red;
}
Method 6
#six { /* Modern Browsers */
color:red;
}
*html #six { /* IE6 */
color:purple;
}
*+html #six { /* IE7 */
color:green;
}
#six { /* IE8 */
color:blue\0/;
}
:root #six { /* IE9 */
color:pink\9;
}
