CSS Hacks for IE targeting only IE8, IE7 and IE6

Did you know that there are specific CSS hacks for IE that allow you to target IE8, IE7 and IE6?

During one of our latest projects we came across some specific CSS issues with our client website rendering on IE6 and IE8.

Yes, Internet Explorer is the bane of a web developers life but the browsers prevalence demands we just get on and deal with it.

CSS Hack Targeting IE8 and Below

To target Internet Explorer 8 and below in CSS, append “9” to the end of the style you want to apply.  e.g.

[gist id=8394754 file=css-ie8.css]

CSS Hack Targeting IE7 and Below

To target Internet Explorer 7 and below in CSS, prepend an asterisk “*” to the start of the style you want to apply.  e.g.

[gist id=8394754 file=css-ie7.css]

CSS Hack Targeting IE6 and Below

To target Internet Explorer 7 and below in CSS, prepend an underscore “_” to the start of the style you want to apply.  e.g.

[gist id=8394754 file=css-ie6.css]

A Warning on Hacking Your CSS

Hacking your CSS may seem a quick fix for getting your styles to work across browser types, however, you should really be using conditional statements from within your HTML. e.g.

[gist id=8394754 file=conditional-ie.html]Conditional statements in HTML have cross-browser support, however, CSS hacks such as prepending an underscore are not.

This means that Apple, for example, could add CSS support for a prepended underscore in the next release of Safari and suddenly your hacks also affect that browser.

[Editor: Looking for how to hack CSS for IE10 or IE11?]Happy hacking!