CSS Browser Hacks

CSS hacks are needed in order to solve problems caused by different browsers rendering. It’s often getting down to solve problems with Internet Explorer, especially version 6 and 7. But I stopped to care about IE6 already No more!

So the main problem is Internet Explorer. But we have this CSS code to dominate:

/* for IE6 */
*html .someClass {color:red}
/* for IE7 */
*:first-child + html .someClass {color:red}
/* inline IE7 CSS */
.someElement {
   color:blue; /* all browsers */
   *color:red
}
/* inline IE8 CSS */
.someElement {
  color:crimson; /* all browsers */
  color:black\0/; /* IE 8 & 9 */
}
/* IE9 CSS */
:root .someElement { color:green\0/IE9; }  /* IE9 */

Firefox Only CSS Hack

/* FireFox 3 and Up */
html>/**/body .someClass, x:-moz-any-link, x:default {left:1em !important}

Chrome and Safari CSS hack:

@media screen and (-webkit-min-device-pixel-ratio:0)
{
.someElement {margin:1em}
}

Safari and Google Chrome are mainly the same, but sometimes behave differently, especially in forms. I didn’t found any way to separate them in CSS.