Internet Explorer 6 has been in use for a whopping eight years, during which time the internet has grown both in size and in usability. So here we are, with 25% of people still using IE6 which hardly even begins to support modern CSS techniques.
For a long time, designers have found different ways to target IE6 and its slightly improved (but still seriously lacking) predecessor, IE7, and feed them different CSS to fix any bugs that the browsers have with normal, up-to-date styling. A popular trick is to use IE’s conditional comments to give IE6 and/or IE7 a different stylesheet. This works fine, except that it means that you need to make two stylesheets for your designs. There is a way that is less widely known that exploits the star-html hack combined with CSS 2.1 selectors to differentiate between IE6 and IE7. It looks like this:
element {
/* Standards-Compliant Properties Here
}
* html element {
/* IE6 Properties Here
}
*+html element {
/* IE7 Properties Here
}
Basically, IE6 and IE7 both think that there is an element above the html element, which is nonexistent in other browsers. So the * html selector is used to target IE6 and 7. To single out IE7, a CSS 2.1 selector (*+html) which is unsupported by IE6 can be used.
The CSS-only technique is a lot less of a pain than using a separate ie6.css file for all of your hacks. Anyway, that’s just a helpful hint I just figured out.
