CSS: IE hacks
In March last year, I've published a post about CSS conditional statements. The article explains how to create conditional statements and load specific stylesheets for specific Internet Explorer versions.
We all know that, in order to guarantee a cross-browser full compatibility of our web sites, the above solution gives us a possible clean way out of the problem.
With that in mind, there are situations when we don't really want to create different stylesheets for each version of IE, and a simpler solution would be preferable.
Those are the cases where we can use the famous IE CSS hacks.
We all know that, in order to guarantee a cross-browser full compatibility of our web sites, the above solution gives us a possible clean way out of the problem.
With that in mind, there are situations when we don't really want to create different stylesheets for each version of IE, and a simpler solution would be preferable.
Those are the cases where we can use the famous IE CSS hacks.
Standard
A standard CSS could be:.foo {
border: 1px solid black;
}
This is just an example. The following hacks can be applied to anything.IE 8 and below
.foo {
border: 1px solid red\9;
}
Please notice the backslash (\) followed by a nine (9)IE 7 and below
.foo {
*border: 1px solid blue;
}
Please notice the star (*) before "border".IE 6
.foo {
_border: 1px solid white;
}
Please notice the underscore (_) before "border".The complete style
The complete style will be:.foo {
border: 1px solid black;
border: 1px solid red\9; /* IE8 and below */
*border: 1px solid blue; /* IE7 and below */
_border: 1px solid white; /* IE6 */
}
And that is all.