CSS: IE hacks

Tweet

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.

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.