我们知道和会运用CSS IE 火狐浏览器之间的区别DIV+CSS HACK,这里为大家再介绍下区别谷歌浏览器(Chrome)苹果浏览器(safari)与IE之间的hack;
只有webkit核心浏览器的谷歌浏览器、safari浏览器识别的CSS hack
Chrome和safari的CSS hack代码,只有谷歌浏览器苹果浏览器读取CSS代码:
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit内核兼容CSS */
}
范例:
@media screen and (-webkit-min-device-pixel-ratio:0) {
.yangshi1{color:#f00}
.yangshi2{border:1px solid #f00;}
.yangshi3{background:#f00;}
}
HTML代码:
<div class="yangshi1">css样式1</div><br />
<br />
<div class="yangshi2">divcss5样式2</div><br />
<br />
<div class="yangshi3">div+css样式3</div>
总DIV 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;}
}
/* www.divcss5.com */
</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>
可自己动动手复制以上完整演示代码,自己实例实例增加记忆和使用技巧知识