Friday, 27 April 2012

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.
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.


  1. Here's my idea to get the best of both ideas.

    1. Get the site looking schmick in all browsers except IE using hack-free CSS

    2. Use conditional statements to load a separate CSS file which that targets all versions of IE

    3. Put the needed IE hacks (as above) in this file

  2. Yes Reverson, I agree :-)
    That would be a clean solution, because all the hacks would be "together" in a file. Good idea!


Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.