Internet Explorer is not known for it’s standard compliancy, and because of that, people have been using all sorts of
CSS hacks to get around rendering problems in it. The IE team
have been working hard to prevent a lot of these hacks with the release of IE7, so a lot of your presumably fixed layout bugs might have returned.
And be warned: the hacks you’ve put in that still work, can’t be relied on to work in the future.
There is a simple solution though. IE has a feature, called conditional comments,
which can help you out. Semantically, it is one of the ugliest things ever invented, however, it’s quite useful. IE7 supports these too,
and it provides a perfect way to detect different versions of IE and fix the different bugs in them.
Here’s an example use of conditional comments for IE6 and lower versions of IE:
<!--[if lte IE 6]> <style type="text/css"> @import "ie_hacks.css"; </style> <![endif]-->
Here’s an example of how to use conditional comments for IE7:
<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie_hacks.css" media="screen"/> <![endif]-->
[if lte IE 6] means “if less than or equal to IE 6”.
[if IE 7] means “if this is Internet Explorer 7”. Other possibilities are:
- [if IE]
- any version of Internet Explorer
- [if gte IE 5]
- version higher than or equal to IE 5 (including IE 5.5)
- [if lte IE 5]
- version lower than or equal to IE 5 (including IE 5.5)
- [if IE 6]
- if Internet Explorer 6
- [if IE 5.0]
- will only match IE 5.0, whereas
- [if IE 5.5]
- will match IE 5.5
- [if IE 7]
- as will this for IE 7.
Be cautious though! The MSDN article speaks about “downlevel-revealed” conditional comments, with the following syntax:
<![if expression]> HTML <![endif]>
These comments will be hidden in IE if the expression is correct, but they will not be hidden in Firefox or any other browser!
So it’s easy: you should not use them.