List of CSS hacks – target specific browser(s) and browser versions

As web developers we are faced with an increasing number of browsers and browser versions. Regarding CSS styles, we are obviously trying to write CSS code that is cross-browser compatible, which should be possible to achieve for a decent web developer. Nevertheless there are rare cases where it seems almost impossible to write a straight-forward, cross-browser compatible CSS. For these cases we may use CSS hacks that target only one or more specific browsers or just a specific version of a browser.
In the following I have tried to list some CSS hacks for the most important browsers on today’s web that might come in handy.

Internet Explorer 6:

.exampleIE6 {_background-color:#FBF9EA;}

ATTENTION: In case of an outdated doctype-definition (e.g. HTML 4.01 Transitional), the underscore-hack will be interpreted by newer IE versions as well.

Internet Explorer 6 + 7:

.exampleIE6and7 {*background-color:#FBF9EA;}

Internet Explorer 6 + 7 + 8:

.exampleIE6and7and8 {background-color:#FBF9EA\9;}

Firefox:

.exampleFF, x:-moz-any-link {background-color:#FBF9EA;}

ATTENTION: IE 7 also interprets this rule, so you might need the *-Hack for IE 7 afterwards.

Firefox 3.0 and above:

html>/**/body .exampleFF30andAbove, x:-moz-any-link, x:default {background-color:#FBF9EA;}

Firefox 3.5 and above:

body:first-of-type .exampleFF35andAbove, x:-moz-any-link, x:default {
    background-color:#FBF9EA;
}

Firefox 3.6 and above:

@media screen and (-moz-images-in-menus:0) {
    .exampleFF36andAbove {background-color:#FBF9EA;}
}

Chrome + Safari:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .exampleChromeAndSafari {background-color:#FBF9EA;}
}

Opera:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and 
(-webkit-min-device-pixel-ratio:0)  {
    head~body .exampleOpera {background-color:#FBF9EA;}
}

Combined hacks:

You may also combine any of these css hacks if needed, e.g. the following example sets a general bottom-margin of 20px and then redefines it to 10px for IE 7 and 5px for IE 6.

.exampleCombinedHacks {margin-bottom:20px; *margin-bottom:10px; _margin-bottom:5px;}

I have set up a test page for the hacks above allowing you to test which styles apply to your current browser.

Although I think that this list offers most probably enough CSS hacks to fix the usual problems, you may also have a look at this blog post by Paul Irish offering you even more hacks.