Specifically target each browser in CSS

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; }

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">