In times past, if you absolutely had to have a hack in your CSS files to target that pesky IE problem, you used to be able to use the Underscore Hack. This useful hack came about because the CSS parser in IE6 ignores the underscore character (_), applying the rule as though it were the name alone. If, for example, your PNG didn’t look nice in IE6, you could do something like this:
#mydiv {
background: url(wonderful.png);
_background: url(wonderful.gif); /* IE rule overrides */
}
In IE7, however, Microsoft fixed that bug, and now the parser treats _named properties as unique, in accordance with CSS 2.1. The result being that you can still use the underscore hack to target IE6 only with a rule, which is useful for when you’re working around some other bug that was fixed in IE7.
But what if you need to hack your CSS in IE7? You can use a period (.) instead of an underscore to prefix your property names. This method can be used to target both IE7 and IE6, or just IE7 with some creative jiggling:
/* targeting IE7 only */
#mydiv {
margin-top: 10px;
.margin-top: 20px; /* affects both IE6 & IE7 */
_margin-top: 10px; /* reapply first rule to IE6 */
}
The period doesn’t validate, unfortunately. But neither does the underscore, for that matter, even though it’s allowed under the W3C spec. And your best bet for future-proofing is still conditional comments. But for the moment — which means until some future version of IE changes it — this seems like a relatively clean way to work around the layout issues still present in IE7.
