Internet Explorer has it’s problems with CSS (OK, it’s pretty much awful) but if you are worth your salt as a CSS coder, you should be able to deal with it. I am of the opinion that you can handle anything IE can throw at you without a ton of hacks and without having alternate stylesheets. But if you (or your client) really wants to get pixel-perfect results cross-browser, you may need to specify alternate stylesheets for different browsers, especially Internet Explorer.
Here is the basic technique for an IE-Only stylesheet:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->
The opposite technique, targeting only NON-IE browsers:
<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]-->
If you need to get down and dirty with specific versions of IE, here are a few examples.
IE 7 ONLY:
<!--[if IE 7]>
<link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->
IE 6 ONLY:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" />
<![endif]-->
IE 5 ONLY:
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="IE-5-SPECIFIC.css" />
<![endif]-->
IE 5.5 ONLY:
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="IE-55-SPECIFIC.css" />
<![endif]-->
VERSION OF IE VERSION 6 OR LOWER: (I find this one pretty handy)
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" />
<![endif]-->
Why would you want to use these conditional stylesheets?
- It’s more future-proof than hacks. A new browser or a new version of a browser may come along one day that wrecks up interprets your hacks in a strange way and will mess up your styling. That’s no good! For example, there is a really effective min-height hack out there right now, but who is to say that will work forever? The solution here would be to declare a min-height like normal in your real stylesheet, then declare a height (the workaround) in an IE-6-and-Lower stylesheet.
- It keeps your CSS clean. And valid! If having CS code that passes W3C snuff is important to you, this is the way to go
- Expandability. If a new browser comes along that you want to also support, you can create a conditional statement and stylesheet for that and you are all set, instead of re-tweaking your existing stuff.
If you think it is overkill for you to have IE-Specific stylesheets, you can use hacks to make things happen. Again, I don’t really recommend this, but this is how it’s done.
IE-7 ONLY:
* html #div {
height: 300px;
}
NON IE-7 ONLY:
#div {
_height: 300px;
}
HIDE FROM IE 6 AND LOWER:
#div {
height/**/: 300px;
}
HIDE FROM IE 6 AND LOWER: (another way)
html > body #div {
height: 300px;
}
