Some CSS Hacks

Often some browsers display pages in a way we don’t like. To “teach” these browsers how to do things other browsers know we need to use tricks: “hacks”. Here are some common ones.

Internet Explorer ≤ 7.0

.class {//width:100px;}

Internet Explorer ≤ 6.0

.class {_width:100px;}

Internet Explorer 5.0 and 5.5

.class {\\width:100px;}

Safari

body:first-of-type .class { }

html:root*.class { }

html*.class { }

Safari, KHTML

html[xmlns*=""] body:last-child { .class { }}

WebKit

@media all and (min-width:0px) { body:last-child {.class { }}

Safari, Webkit, KHTML

body:last-child:not(:root:root) {.class { }}

Safari and Opera

@media screen and (-webkit-min-device-pixel-ratio:0){.class { }}

Mozilla

@-moz-document url-prefix() {.class { }}

.class, x:-moz-any-link { }

Gecko ≥ 1.8

html:not([lang*=""]):not(:only-child) {.class { }}

Konqueror 3.4.3

html:not(:nth-child(1)) {.class { }}

Also we can use conditional comments to separate styles specific to Internet Explorer 6, 7, 8 from “main” styles. IE 6:

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->

IE 7:

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]-->

IE 8:

<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie8.css" /><![endif]-->