Internet Explorer (IE 5, 5.5, 6 and 7) CSS Hacks

I will start off by saying that I understand both the pros and cons of hacking CSS and I am not condoning it, however, I still think it is worth while showing the hacks out there and the potential to isolate specific browsers by doing this.  This is only going to be a short article reflecting on IE hacks only.

the hacks

Phew.  Right now I’ve got that out of the way lets start off with one of the most commonly used hacks, the underscore hack.

_width:100%;

This will work in all IE browsers below IE 7 but NOT IE 7 itself.

Next we move onto the backslash hack.

w\idth:100%;

This will work in most browsers (Firefox 2 and 1.5, IE 7 and 6, Opera) however it is not recognised in IE 5.5 and 5.

Then the star hack.

*width:100%;

This works in all versions of IE but not other browsers.

combinations

Right now we have some of the main hacks listed we can now start to combine them to good effect.

Lets combine underscore hack and the backslash hack.

_w\idth:50%;

This will work in IE 6 only;

Now lets combine the star hack and the backslash hack.

*w\idth:50%;

This will work in IE 7 and 6.

Now lets adopt a slightly different method of combing using the star hack and the underscore hack as follows.

*width:50%;
_width:inherit;

This will only target IE 7 with regards to applying the 50%.

demo

Check out this simple IE CSS Hacks demo to see the results.  All the columns that are set to a width of 50% have the style applied.

This entry was posted on Wednesday, March 21st, 2007 at 9:18 am and is filed under General, Google. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.