`

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

Chrome浏览器GoogleCSSwebkit 
阅读更多
所幸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;}

分享到：
| 解决不同浏览器窗口大小是否显示某DIV问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics