目前主流浏览器CSS Hack 包括:ie, firefox, safari/chrome, opera

部分参考:http://leeiio.me/css-hack-for-firefox-opera-safari-ie/

<p id="opera">我来自 Opera 7.2 - 9.5</p>
<p id="safari">我是神奇的 Safari</p>
<p id="firefox">我来自 Firefox</p>
<p id="firefox12">我是你爷爷 Firefox 1 - 2 </p>
<p id="ie7">我是囧 IE 7</p>
<p id="ie6">我是脑瘸 IE 6</p>


然后我让这些 P 标签默认都不显示:
p{display: none;}


使用 IE CSS [url=http://msdn.microsoft.com/en-us/library/ms537512.aspx]条件注释[/url]区分 IE 浏览器,这个已是前端常识了:
<!--[if IE 7]>
<style type="text/css">
p#ie7{display: block;}
</style>
<![endif]-->

<!--[if IE 6]>
<style type="text/css">
p#ie6{display: block;}
</style>
<![endif]-->


IE 中另一个可用的方法是将不同版本的CSS Hack声明放入一个样式表内,这个也早是前端常识了:
/* IE 7 */
p#ie7{+display: block;}

/* IE 6 */
p#ie6{-display: block;}



[b]CSS Hack 区分 Opera[/b]
/* Opera */
@media all and (min-width:0px){
p#opera { display: block; }
}


[b]CSS Hack 区分 Firefox[/b]
第一个使用了 body:empty 来区分 Firefox 1 和 2 。第二个 hack使用了全部 Firefox 浏览器的专有扩展 -moz。 -moz 只对 Firefox有效,使用这个 Hack 大可不必担心其他浏览器的影响。
/* Firefox 1 - 2 */
body:empty p#firefox12{display: block;}
/* Firefox */
@-moz-document url-prefix(){
p#firefox { display: block; }
}



[b]CSS Hack 区分 Safari[/b]
Safari 的 CSS hack 与 Firefox 的 hack 看起来很像,使用的是 Safari浏览器的专有扩展 -webkit 且只对 Safari 浏览器有效。
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0){
p#safari { display: block; }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值