Personal CSS Hacks for IE6, IE7, IE8, IE9, IE10

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 5 popular versions of IE. Most likely you already know the CSS hacks for IE6 and IE7, but for IE8 and IE9 probably not. Therefore the focus of this article is on a personal CSS hack for Internet Explorer 8 and Internet Explorer 9.

CSS hack for Internet Explorer 6

It is called the Star HTML Hack and looks as follows:

* html .color {color: #F00;}

This hack uses fully valid CSS.

CSS hack for Internet Explorer 7

It is called the Star Plus Hack.

*:first-child+html .color {color: #F00;}

Or a shorter version:

*+html .color {color: #F00;}

Like the star HTML hack, this uses valid CSS.

CSS hack for Internet Explorer 8

@media \0screen {
	.color {color: #F00;}
}

This hacks does not use valid CSS.

CSS hack for Internet Explorer 9

:root .color {color: #F00\9;}

This hacks also does not use valid CSS.

Added 2013.02.04: Unfortunately IE10 understands this hack.

CSS hack for Internet Explorer 10

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.color {color: #F00;}
}

This hacks also does not use valid CSS.

Demo

I’ve created a simple demo. Take a look.