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!
8 Responses
ie8 only: the best way is
body{background:#f00/;}
/ is the Ie8 CSS Hack
This css is not all Element not support ??
I don’t know. But I didn’t get any bug in my project.
no it does not work for width property
like
width: 230px;
width: 215px9;
use Ie8 CSS Hack
Your width: 230px; and padding-left: 15px; you use to this width/**/:215px/**/;
maybe another way:
@media screen {
.selector { property: value; }
}
this for all properties.
@media screen {
.selector { property: value; }
}
this for all properties.
For IE8 only you should use this:
selector {value: property9;
}