成长脚印-专注于互联网发展
【解决】针对谷歌浏览器Chrome的CSS hack
post by:天之骄子 2012-8-11 11:26
CSS Hack浏览器兼容性对照表[点击放大]
CSS Hack浏览器兼容性对照表
[点击放大]
现在使用谷歌浏览器Google Chrome的用户越来越多,所以在制作网页时也应考虑到Chrome浏览器的兼容性。虽然在原来的CSS hack的原理文章中提到过如何用CSS hack区分Chrome浏览器、Safari浏览器和Opera浏览器,但这次还是要单独再讲一次。  针对Chrome和Safari等Webkit核心浏览器的CSS hack代码:  
@media screen and (-webkit-min-device-pixel-ratio:0) { }
 示例:  
 @media screen and (-webkit-min-device-pixel-ratio:0) { .font1 {color:#f00} .border1 {border:1px solid #f00;} .bg3 {background:#f00;} }
 除此之外,还有专门针对某个浏览器的CSS hack方法,如针对Webkit核心浏览器和Opera的写法:  
@media all and (min-width:0px){ .font1 {color:red;} }
 针对Opera浏览器的写法:  
@media all and (-webkit-min-device-pixel-ratio:10000),not and all (-webkit-min-device-pixel-ratio:0) { .font1 {color:red;} }
 针对Firefox浏览器的写法:  
@-moz-document url-prefix() { .font1 {color:red} }
 除了添加CSS hack以外,还应该给每个CSS hack加上注释,这样才能熟记于心,希望大家找到适合自己的方法。
评论:
发表评论:
昵称

邮件地址 (选填)

个人主页 (选填)

内容