The author recommends two ways to target rules at IE: 1) create new stylesheets for each version of IE, or 2) CSS hacks that only IE understand/ignores.
But I prefer to use a different approach: conditional classes on the body tag. For example:
I always get a little question mark over my head every time I read something talking about how IE "Broke" the CSS box model.
Those of us who were around back in the day recall both IE4 and NN3 allowing one to specify the Width of an object at 100px, with the refreshing expectation that nomatter what padding or borders you applied to it, the width of the rendered element would be 100px.
That was the universal standard at the time that the CSS specifications were written. For reasons nobody can explain, the W3C came out with a box model that broke that convention, and that's the model that NN6 followed.
Netscape Navigator 6, you will recall, was incapable of rendering Netscape.com correctly when it was first released. That's because Netscape.com was designed to be viewed by the current state of the art browsers on the market, both of which interpreted the box model the way that Internet Explorer did until recently.
I've always found the best solution is to avoid IE6 hacks altogether, and try to be as concise as possible when writing the CSS file, and give the IE6 a stable feel, and accepting the inherent flaws that make it so difficult to work with.
The casual observer who is still using such a dinosaur is never going to be bothered.
After too many years of doing this, this is the best advice I can give: The most common issues are inconsistent spacing between elements. Don't try to understand why this may be, instead, use padding if margin isn't working, vice versa otherwise, and move the layout to another equivalent element (simple wrapper, etc.) if you run into a really sticky problem.
This has solved about 90% of the CSS-related cross-browser layout problems I've experienced.
Do not use hacks unless you absolutely must!
You should never need to target a non-Microsoft browser. When you need to target IE,
* html selector (IE6-inclusive)
and
html:not([dummy]) selector (IE7-exclusive)
Even though they work, these are for last resorts and should pretty much never be used. Most of the time that I see a cross-browser hack used, it really was due to the author's poor understanding of the CSS issue at hand and would've been corrected with good defensive styling using simple, well-supported styles.
Yep, I agree. 90% of these hacks really aren't necessary at all. Another thing to consider is that your site doesn't need to look 100% the same across all browsers -- allow room for leeway, and you won't be pulling your hair out nearly as much.
IE6 isn't as bad as y'all make it out to be. Sure, we can't use fancy CSS3 selectors or HTML5, but you can't on IE7 or 8 either...
I've always promised the designers pixel perfection across browsers, but I agree that for a casual site it's OK to leave some aspects of typography to the browser defaults, and to fudge layouts with uncalculated "em" spacing.
But I prefer to use a different approach: conditional classes on the body tag. For example:
Then you can write IE-specific rules without CSS hacks: And all your related styles can be grouped together in the same file.via http://paulirish.com/2008/conditional-stylesheets-vs-css-hac... and http://www.paulhammond.org/2008/10/conditional/