10 Dirty Internet Explorer CSS Hacks You Might Not know

Written by Kevin Liew on 15 Nov 2010
43,744 Views • Techniques


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
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

Elijah Manor 13 years ago
Nice, but hopefully I won't have to use ;) What are IE9 only and IE9 and below?
shani 13 years ago
hey there, did you get any answers for your question for css hack for ie9 only and ie9 and below?
Kevin Liew Admin 13 years ago
I will recommend IE Conditional Comments:
Vaibhav Gupta 13 years ago
impressive man... chrres :)
Jason 13 years ago
Good post, but how about an explanation of what these do or what they are.

Personally, I find using hacks to whip IE into shape are fine. It's a terrible browser that doesn't conform to standards and if I can limit the time it takes me to fix problems with it, I'll use hacks every time.
Chris 13 years ago
Is it just me, or are #6 and #8 exactly the same? They can't be both "IE 6 Only" and "IE 6 and below". Not that it really matters because there's pretty much no one out there using versions below 6 anymore.
Thoams 13 years ago
Great list !

I think there are two times the hack :
.box {
_background: #f00;

I recommand to use this other hack for IE8 and below :
.box {
background: #f009

Have a good day !
Maurizio Mangione 13 years ago
IMHO the best way to solve Internet Explorer's CSS layout issues is to learn to write standard code. You really don't need different stylesheet or hacks to build a website that works.
Andy G 13 years ago
ie9 should be standards compliant. *should* be (astrick pun not intended)
dougwig 13 years ago
For IE7 and below I like the "!ie" hack:

.smallText { font-family:Arial; font-family:Tahoma !ie }

I believe !anything will work but !ie is nice and explanatory
PBT 13 years ago
Yep, knowing what they do would just make too much sense, and save everyone a LOT of time... DUH.
Davinder Bhardwaj 12 years ago
hey, what is the IE9 CSS conditional hack