Dead simple way to target IE6/7 separately in CSS

Most of the time when your CSS is solid, you’re not going to see too many layout discrepancies between modern browsers.  However if you have just one or two elements that are acting up in IE6 and/or IE7, here are a couple very useful tricks.

The underscore hack, and the star element hack:

.box {
   background: #00f; /* all browsers including Mac IE */
   *background: #f00; /* IE 7 and below */
   _background: #f60; /* IE 6 and below */
   padding: 7px;
   color: #fff;
}

An easy way to remember this is star for the higher version, underscore for the lower.

You can also use the backslash hack to target IE5 – but let’s face it, IE5 is crap.  Throw it away.

If you have more than just one or two rogue elements, consider using conditional comments (the if statement).

More on Ed Eliot’s blog, thanks Ed.