thinking

one platform thousands thinking

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

CSS hacks take advantage of browser bugs for hiding CssRules from specific web browsers. Listed below are the hacks for major browsers like ie6, ie7, firefox2, firefox3, Google chrome, safari and 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.

Hope this information will be useful for you. Please use the browser hacks in a proper manner. For example, you might know double margin bug in ie6. In such case you can use display inline which will render correctly by all the browsers instead of you using ie6 hack seperately

posted on 2010-02-10 14:44 lau 阅读(541) 评论(1)  编辑  收藏 所属分类: Web

Feedback

# re: Web browser hacks, Css hacks - ie, firefox, chrome, safri, Opera 2011-02-12 15:09 lau

http://shishi11.javaeye.com/blog/840719  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: