【解决】针对谷歌浏览器Chrome的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加上注释，这样才能熟记于心，希望大家找到适合自己的方法。

相关日志：

自适应网页设计（Responsive Web Design）

html头文件设置常用之<meta>设置缓存

【分享】JQuery 选择器、过滤器及JQ对象和DOM对象的互相转换

【解决】frameset, iframe, frame框架页面出现横向滚动条bug的隐藏方法

【解决】AJAX返回再度调用AJAX时两者返回参数混乱解决