webkit核心浏览器css兼容问题解决方案

webkit核心的浏览器CSS代码兼容性比较特别,可以使用如下解决方案:

@media screen and (-webkit-min-device-pixel-ratio:0) {
<!--这里是CSS样式代码-->
}


示例:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>谷歌浏览器和safari  webkit独有区别其它浏览器css hack演示</title>
<style type="text/css">
@media screen and (-webkit-min-device-pixel-ratio:0) {
.yangshi1{color:#f00}
.yangshi2{border:1px solid #f00;}
.yangshi3{background:#f00;}
}

</style>
</head><body>
<div class="yangshi1"><a href="http://www.divcss5.com">css</a>样式1</div><br />
<br />
<div class="yangshi2"><a href="http://www.divcss5.com">divcss5</a>样式2</div><br />
<br />
<div class="yangshi3"><a href="http://www.divcss5.com">div+css</a>样式3</div>
</body>
</html>

你可能感兴趣的:(html,webkit-CSS兼容)