Specifically target each browser in CSS

Andrew — Fri, 13 Nov 2009 23:31:33 +0000

The following CSS ‘hack’ can be used to target all browsers IE 7, IE 6 and IE < 6 ...

All browsers:

margin-top: 44px;

IE7 and below:

*margin-top: 26px;

IE6 and below:

_margin-top: 44px;

IE6 only:

_mar\gin-top: 44px;

All firefox:

#selector[id=selector] { color: red; }

All firefox:

@-moz-document url-prefix() { .selector { color: red; } }

All Gecko:

*>.selector { color: red; }

Firefox 1.5 and newer:

.selector, x:-moz-any-link, x:only-child { color: red; }

Firefox 2 and older:

body:empty .selector { color: red; }

Firefox 2 and older:

#selector[id=SELECTOR] { color: red; }

Firefox 2 and older:

html>/**/body .selector, x:-moz-any-link { color: red; }

Firefox 3:

html>/**/body .selector, x:-moz-any-link, x:default { color: red; }

Andrew Beaton :: FAQ » CSS