Web browser hacks, Css hacks - ie, firefox, chrome, safri, Opera

CSShackstakeadvantageofbrowserbugsforhidingCssRulesfromspecificwebbrowsers.Listedbelowarethehacksformajorbrowserslikeie6,ie7,firefox2,firefox3,Googlechrome,safariandopera.

InlineHackforIE

*(star)canbeusedastheinlinehackforbothie6andie7.

ForExample:

Syntax:.selector{*property:value;}

.logo{*margin-left:10px;}

IE6browserinlineHack

_(underscore)canbeusingonlyforie6

ForExample:

Syntax:.selector{_property:value;}

.logo{_margin-left:10px;}

Firefoxinlinestyle

content:"\"/*"canbeusedforfirefoxonlywhereIEcannotrecognizeit.

InternalStyle

Use*htmlforie6and*+htmlhackforie7

ForExample:

Synatax:*html.selector{property:value;},*+html.selector{property:value;}

*html.logo{margin-left:10px;}forie6

*+html.logo{margin-left:20px;}forie7

IE7andFirefoxbrowserHack

Usehtml>bodyhackforie7andfirefox.

ForExample:

Syntax:html>body.selector{property:value;}

html>body.logo{margin-left:10px}willtakeonlyinie7andfirefox

MordernbrowserHackorFirefoxHack

Usehtml>/**/body{}hackwhichwillsupportonlyinbothfirefox2andfirefox3.

ForExample:

Syntax:html>/**/body.selector{property:value;}

html>/**/body.logo{margin-left:10px}willtakeonlyinfirefox.

BrowserhackforOperaversions9andbelow

Usehtml:first-child{}foroperabrowser.Alsoyouuse

Syntax:@mediaalland(min-width:0px){head~body.selector{property:value;}}

ForExample:

@mediaalland(min-width:0px){head~body.logo{margin-left:10px;}}onlyforopera

Firefox3browserhack

Usehtml>/**/body.selector,x:-moz-any-link,x:default{property:value;}forfirfox3only.

ForExample:

Syntax:html>/**/body.pro_yl,x:-moz-any-link,x:default{background:red;}

GoogleChromebrowserhack

Usebody:nth-of-type(1).elementOrClassName{property:value;}onlyforgooglechrome.

ForExample:

body:nth-of-type(1).logo{margin:20px;}

@mediascreenand(-webkit-min-device-pixel-ratio:0)

{#div{properties:value;}}

Safaribrowserhack

UseSyntax:body:first-of-type.elementOrClassName{property:value;}

FoxExample:

body:first-of-type.logo{margin-top:10px;}onlyforsafari.

Hopethisinformationwillbeusefulforyou.Pleaseusethebrowserhacksinapropermanner.Forexample,youmightknowdoublemarginbuginie6.Insuchcaseyoucanusedisplayinlinewhichwillrendercorrectlybyallthebrowsersinsteadofyouusingie6hackseperately.

相关推荐