<! Doctype HTML public "-// W3C // dtd html 4.01 // en" "http://www.w3.org/TR/html4/strict.dtd">
<HTML lang = "en">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> CSS browser hacks </title>
<Style type = "text/CSS">
Body P
{
Display: none;
}
/* Opera */
HTML: First-child # Opera
{
Display: block;
}
/* IE 7 */
HTML> body # IE7
{
* Display: block;
}
/* IE 6 */
Body # IE6
{
_ Display: block;
}
/* Firefox 1-2 */
Body: empty # firefox12
{
Display: block;
}
/* Firefox */
@-Moz-document URL-prefix ()
{
# Firefox {display: block ;}
}
/* Safari */
@ Media screen and (-WebKit-Min-device-pixel-ratio: 0)
{
# Safari {display: block ;}
}
/* Opera */
@ Media all and (-WebKit-Min-device-pixel-ratio: 10000), not all and (-WebKit-Min-device-pixel-ratio: 0)
{
Head ~ Body # opera {display: block ;}
}
</Style>
</Head>
<Body>
<P id = "Opera"> I am from opera 7.2-9.5 </P>
<P id = "safari"> I'm a magic safari </P>
<P id = "Firefox"> I am from firefox </P>
<P id = "firefox12"> I'm your grandfather Firefox 1-2 </P>
<P id = "IE7"> I'm IE 7 </P>
<P id = "IE6"> I'm brain IE 6 </P>
</Body>
</Html>
Although CSS hack is good and easy to be compatible with various browsers, it cannot pass W3C verification, so you have to weigh whether it is necessary to use it.