所幸Google Chrome用的是与Safari一样的Webkit引擎，我们可以使用对safari相似的方式作css hack，写法为：
Example Source Code
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* 针对Google Chrome、Safari 3.0、Opera 9 的CSS样式 */
}
另有一种通过附加#的Css hack对chrome无效，可能是Webkit版本不同。
此css hack无效
Example Source Code
p.callout { color:#FF0000; font-weight:normal; }
p.callout { color:#000000; font-weight:bold;# }
接着我们测试下：
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Safari CSS Hack Demo | theMechanism</title>
<style type="text/css">
<!--/*--><![CDATA[/*><!--*/
body {
background-color: red;
font: normal small Helvetica, Arial, sans-serif;
margin: 40px;
}
div {
background-color: #fff;
border: 1px solid #333;
padding: 15px;
}
a { color: #000; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
tag { property: value; }
} ////这个就是了，不过得写在最后面，比如再有个body{}还是会覆盖这个的。
/*]]>*/-->
</style>
</head>
<body>
<div>
<p>In Safari and Opera, the page background should be blue. In every other browser, it should be red.</p>
</div>
</body>
</html>
附：各种常见浏览器使用的内核 (Rendering Engine)
Example Source Code
Mozilla Firefox ( Gecko )
Internet Explorer ( Trident )
Opera ( Presto )
Konqueror ( KHTML )
Safari ( WebKit )
Google Chrome ( WebKit )
|
ps:以上是网上摘来的，我可能不太会用，我的做法是 body:nth-of-type(1) .add{left:615px; color:red;}
分享到：
相关推荐
### CSS Hack针对WebKit核心浏览器（如Chrome与Safari）的应用详解 #### 一、引言 随着前端技术的发展，浏览器兼容性一直是开发者面临的重要问题之一。由于不同浏览器内核对CSS的支持程度存在差异，为了确保网页在...
标题中的“谷歌和Safari WebKit独有CSS Hack”指的是在开发Web页面时，为了针对谷歌浏览器（Chrome）和基于WebKit内核的Safari浏览器进行特定样式调整而使用的CSS技巧。这些技巧通常是为了修复浏览器之间的兼容性...
我在用chrome和FF显示我的html文件的时候，发现它们的结果有所出入，我先不管是什么原因造成的，先hack一下再说，可是以前用过的css hack 都是针对ie，ff，opera，这个chrome和ff该怎么区分呢？试了几个ie，ff的hack...
可是在谷歌浏览器查看时，就出现兼容Google浏览器的BUG了，无法居中。 现在向样式表中添加两句就能解决问题了。 样式表是这样修改的 复制代码代码如下: .Google-center { width:320px; height:202px; text-align:...
为了确保网页在不同浏览器中的表现一致，开发者常常会采用一种名为“CSS Hack”的技术来针对特定浏览器编写样式。CSS Hack主要通过利用浏览器解析CSS规则的不同特性，使得某些样式规则仅对特定版本的浏览器生效。 #...
这篇博客文章可能探讨了如何在Firefox、IE6以及Google Chrome等不同浏览器上实现高效且兼容的popup，因为这些浏览器在处理DOM元素和CSS样式方面存在差异。考虑到IE6的古老，它可能需要特殊的处理来确保兼容性。博主...