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.