Every time you code a layout, you must dealing with inconsistencies of various browsers. Due to his lack of standard support, IE (and especially IE6) has a LOT of css hacks available “on the market”. And that because the IE developer team has some kind of humor for two reason:
- They know that their browser suck so they put conditional comments. Is not a really hack, because you have a documentation, but is the best (and also the safest) way to fix CSS bugs (or even add some extra content for certain version of IE).
- The second reason is funny and creepy: the fresh SP3 for windows is delivered with… IE6. Yes, if you don’t have IE7 installed, you will have IE6. That sucks, isn’t it?
Ok, enough with this, let’s show some real hacks, right?
Internet Explorer hacks
First of all: the best way is to use conditional hacks for IE. That’s because new version of other browsers can misunderstanding some hacks. As far as i know, this wasn’t happen yet, but you never know what gift we can get, right? Use hacks when you have only a couple to fixes!
The most used hack for IE6 is the star selector :
#wrap {border:2px solid blue}
* html #wrap {border:5px solid red}
For IE6, wrap container will have a 5 px border. For any other browser, you will get a 2px blue border. Is important to get IE6 hack AFTER the normal rules, otherwise you won’t get any result.
html>body #wrap {background:white}
#wrap {background:red}
This one is some kind of first rule, but reverted. That’s because IE6 simply don’t know how to deal with this kind of selectors (which is valid tough!). Lucky us, right?
Another hack is the underlined and !important. However, those hacks are NOT recommended for mass production (is ok for testing, but… that’s all):
#wrap {
color:red !important;
color:blue
}
and
#wrap {
color:red;
_color:blue
}
With both hacks you will achieve same result. But i repeat, DO NOT USE it unless you know what are doing. You will avoid a LOT of headaches 
Until now, i talk about IE6 hacks. Here you have a IE7 hack:
#header { font-size:1em }
*:first-child+html #header { font-size:2em }
Like i said before, is mandatory that hack to be AFTER proper rule!
IE6 min/max-width hacks
#wrap {
width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto");
}
For this one, we need to use some CSS expressions. Also, is not recommended (can affect user experience, because browser execute that expression). This hack was founded here.
Image flicker problem
One of the most annoying thing on IE is this: when you have a css image on a link, when you hover that link, the image is reloaded, resulting a short time flicker. Mister-pixel.com comes with a handy solution for this (that works only in IE6 SP1 or greater):
You only need to put these lines in your header (inside of conditional tags) and your problem is done.
There is more?
Well… I’m sure i didn’t cover all CSS hacks. However, these are some of the most important hacks, ready to use anytime you need it (and for your own good, you should bookmark this page because you will need it A LOT!). Do you know any other hacks?
