针对谷歌浏览器Chrome的CSS hack 转

最新推荐文章于 2024-07-19 21:38:22 发布

夜战天狼

最新推荐文章于 2024-07-19 21:38:22 发布

阅读量724

点赞数

分类专栏： CSS

1 篇文章

订阅专栏

本文详细介绍了如何利用CSS Hack技术针对Chrome、Safari等WebKit内核浏览器进行兼容性优化，提供了针对不同浏览器的CSS代码示例，并强调了在代码中添加注释的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在使用谷歌浏览器Google Chrome的用户越来越多，所以在制作网页时也应考虑到Chrome浏览器的兼容性。虽然在原来的CSS hack的原理文章中提到过如何用CSS hack区分Chrome浏览器、Safari浏览器和Opera浏览器，但这次还是要单独再讲一次。

CSS Hack浏览器兼容性对照表来源：centricle.com

[ 点击放大]

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

selector{ 
property:value;  
property:value\9;  
+property:value;  
_property 
当然，注意顺序。根据CSS的优先性，上面的写法，分别针对Firefox、IE8、IE7和IE6显示值