CSS Hacks

The following CSS selectors are considered workarounds and hacks for specific web browsers.
IE 6 and below
* html {}
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
IE8 (how to write CSS properties)
height /***/: 190px9;
Google Chrome
:first-child + html
Safari
body:first-of-type p {}
Firefox (all version)
These hacks target all versions of Firefox:
/* Target all Firefox */
#selector[id=selector] { color: red; }

/* Target all Firefox */
@-moz-document url-prefix() { .selector { color: red; } } 

/* Target all Gecko (includes Firefox) */
*>.selector { color: red; }
Firefox 1.5
This hack targets Firefox versions 1.5 and newer:
/* Target Firefox 1.5 and newer [!] */
.selector, x:-moz-any-link, x:only-child { color: red; }
Firefox 2 & older
These hacks target Firefox 2 and older:
/* Target Firefox 2 and older [!] */
body:empty .selector { color: red; }

/* Target Firefox 2 and older */
#selector[id=SELECTOR] { color: red; }

/* Target FireFox 2 and older [!] */
html>/**/body .selector, x:-moz-any-link { color: red; }
Firefox 3
This hack targets Firefox 3 (and possibly newer):
/* Target FireFox 3 [!] */
html>/**/body .selector, x:-moz-any-link, x:default { color: red; }
Recent Opera versions 9 and below
html:first-child {}
How to Apply Hacks
If you want to add 10px; padding to a div element called #rightpanel specifically for IE 7, then you can use the following hack:
*:first-child+html #rightpanel {
padding: 10px;
}
want to apply the padding just for IE 6, then its as following way:
* html #rightpanel {
padding: 10px;
}

Latest Blogs

Design Wireframes

Design Wireframes
A wir... Read More