Web browser css hacks – firefox, IE, chrome, safri, Opera
Inline Hack for IE
* (star) can be used as the inline hack for both ie6 and ie7.
For Example:
Syntax: .selector{*property:value;}
.logo{*margin-left:10px;}
IE6 browser inline Hack
_ (underscore) can be using only for ie6
For Example:
Syntax: .selector{_property:value;}
.logo{_margin-left:10px;}
Firefox inline style
content:””/*” can be used for firefox only where IE cannot recognize it.
Internal Style
Use * html for ie6 and *+html hack for ie7
For Example:
Synatax: * html .selector{property:value;} , * + html .selector{property:value;}
* html .logo{margin-left:10px;} for ie6
* + html .logo{margin-left:20px;} for ie7
IE7 and Firefox browser Hack
Use html>body hack for ie7 and firefox.
For Example:
Syntax: html>body .selector{property:value;}
html>body .logo{margin-left:10px} will take only in ie7 and firefox
Mordern browser Hack or Firefox Hack
Use html>/**/body {} hack which will support only in both firefox2 and firefox3.
For Example:
Syntax: html>/**/body .selector{property:value;}
html>/**/body .logo{margin-left:10px} will take only in firefox.
Browser hack for Opera versions 9 and below
Use html:first-child {} for opera browser. Also you use
Syntax: @media all and (min-width:0px) {head~body .selector {property:value;}}
For Example:
@media all and (min-width:0px) {head~body .logo {margin-left:10px;}} only for opera
Firefox3 browser hack
Use html>/**/body .selector, x:-moz-any-link, x:default {property:value;} for firfox3 only.
For Example:
Syntax: html>/**/body .pro_yl, x:-moz-any-link, x:default {background:red;}
Google Chrome browser hack
Use body:nth-of-type(1) .elementOrClassName{property:value;} only for google chrome.
For Example:
body:nth-of-type(1) .logo{margin:20px;}
Safari browser hack
Use Syntax: body:first-of-type .elementOrClassName{property:value;}
Fox Example:
body:first-of-type .logo{margin-top:10px;} only for safari.