10 Dirty Internet Explorer CSS Hacks You Might Not know

Introduction

Disclaimer: The intention of this article is not to encourage to apply this hack to your web projects but to understand what have been using by other web designers/developers. The best way to solve Internet Explorer's CSS layout issue is - create different style sheets for different versions of Internet explorers.

Alright, have ever found yourself in this situation, you were trying to update an existing old website, opened CSS file and you saw something that you think it's typo from previous CSS coder - but it's not. There was a CSS file I was trying to update and I saw some asterisks, underscores appear randomly as a prefix in some attributes. Did some search on Google and found out it's Internet explorer hacks!

So, the main purpose of this article, is not encourage you to use hacks, but to understand what hacks have been using by others so whenever you update someone else's project you can interpret the CSS file better. :) Alright, I have collected 10 of them start from IE8 to........ IE5.0!

1. IE 8

 
.color {color: #f00/;}

2. IE 7

 
*+html .box {background:#fff;}
*:first-child+html .box {background:#fff;}

3. IE 7 and below

 
*:first-child+html {} * html {}

4. IE 7 and below

 
.box {
	*background: #f00;	
}

5. IE 6 only

 
.box {
	_background/**/:/**/ #f00;	
}

6. IE 6 only

 
.box {
	_background: #f00;	
}

7. IE 6 only

 
*html .box {background:#fff;}

8. IE 6 and below

 
.box {
	_background: #f00;	
}

9. IE 5.5 only

 
.box {
	_background:/**/ #f00;	
}

10. IE 5.0

 
.box {
	_background/**/: #f00;	
}

Sources

If you want to read more about each hacks, please follow these links:

• CSS Tip: Targeting IE 5.x, 6 and 7 Separately
• A wonderfully simple, wonderfully useful IE CSS hack
• Unrecommended hacks
• Personal CSS Hacks for IE6, IE7, IE8