【解决】针对谷歌浏览器Chrome的CSS hack

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加上注释,这样才能熟记于心,希望大家找到适合自己的方法。


阅读本文后,您的心情是:
 
恶心
愤怒
强赞
感动
路过
无聊
雷囧
关注
知识共享许可协议
评论(0) 浏览(3657) 引用(0)
引用地址:http://blog.baiwand.com/tb.php?sc=9da8df&id=32
Tags:
« 【收集】notepad++ 快捷键(全集) 【转】前端工程师新手必读 »

Blogger

  • blogger
  • 天之骄子
  • 职位:研发工程师
    铭言:
    阳光与欢乐同在,
    与我同在
    主页:
    blog.baiwand.com

分类目录

日志归档

主题标签

数据统计

  • 日志:151篇
  • 评论:45条
  • 碎语:264条
  • 引用:0条

链接表

随机日志 »

最新日志 »

最新评论 »

标签云 »

订阅Rss
sitemap