Personal CSS Hacks for IE6, IE7, IE8
Are CSS hacks an evil? Yes, of course.
But we will use them, while browsers like IE6, IE7 and IE8 will exist and while Microsoft will not create a normal browser, which will stand on equal with modern browsers like FireFox, Safari, Chrome and Opera.
We, web developers, are constantly faced with deficiencies of Internet Explorer, and CSS hacks allow to overcome them in most cases.
In this post I would like to group the personal CSS hacks for each of the 3 popular versions of IE. Most likely you already know the CSS hacks for IE6 and IE7, but for IE8 probably not. Therefore the focus of this article is on a personal CSS hack for Internet Explorer 8.
CSS hack for Internet Explorer 6
It is called the Star HTML Hack and looks as follows:
* html .color {color: #C39;}
This hack uses fully valid CSS.
CSS hack for Internet Explorer 7
It is called the Star Plus Hack.
*:first-child+html .color {color: #66F;}
Or a shorter version:
*+html .color {color: #66F;}
Like the star HTML hack, this uses valid CSS.
CSS hack for Internet Explorer 8
I learned about it from a familiar russian web developer, who’s found it by experimental way. It looks like this:
.color {color: #0FC\0/;}
There are several similar variants of this hack, but this is the easiest. It’s very easy to remember. Just add the \0/ at the end of a CSS rule. This hack must go after the rules for all another browser, i.e.:
.color {color: #777;} /* for all browsers */ * html .color {color: #C39;} /* for IE6 */ *+html .color {color: #66F;} /* for IE7 */ .color {color: #0FC\0/;} /* for IE8, going last */
This hacks does not use valid CSS, therefore I recommend to use a conditional comments.
Demo
I’ve created a simple demo, it displays, what personal CSS hacks works fine for all 3 versions of IE. Take a look.
CSS hacks are never a good solution…
Of course there is conditional comments but it’s not very usefull with big CSS…
I prefer this clever use of conditional comments, wich is still improvable like this:
<!--[if IE 6]><![endif]--><!--[if IE 7]><![endif]-->
<!--[if IE 8]><![endif]-->
<!--[if !IE]>--><!--
What do you think about this?
I would never use this method, because the HTML becomes ugly. Moreover, on my practice I have not met the need for simultaneous connection of stylesheets for all 3 version of IE.
I don’t see a problem with extra HTTP requests while using conditional comments.
> I would never use this method, because the HTML becomes ugly.
Ok, I understand
I make a pastie because Wordpress removes a lot of tags… ;-)
No problem with extra HTTP requests using conditional comments, it’s just sometimes difficult to maintain CSS with conditional comments because CSS parts are in different files.
THank you very much.
It was very helpful for me.
@Jeremy: against the Non standard rules of IE versions and their inconvenience , it is a great and fast solution indeed.
I prefert to use this:
<!–[if IE 6]><![endif]–>
but everyone has the way the he loves…