谷歌浏览器(Chrome) safari的webkit核心浏览器css代码

2010-11-19 09:40:42 区别谷歌浏览器css Chrome hack,CSS 针对谷歌浏览器(Chrome) safari的CSS hack webkit核心兼容，只有webkit核心的谷歌浏览器（Chrome ）、safari浏览器识别的CSS hack

css 谷歌浏览器 css Chrome css safari浏览器识别CSS hack

我们知道和会运用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">HTML8样式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;} 
}  
/* 红色区代码是专门写给谷歌浏览器才执行的样式 */ 
</style> 
</head> 
<body> 
<div class="yangshi1"><a href="//www.yfnd.net">css</a>样式1</div><br /> 
<br /> 
<div class="yangshi2"><a href="//www.yfnd.net">HTML8</a>样式2</div><br /> 
<br /> 
<div class="yangshi3"><a href="//www.yfnd.net">div+css</a>样式3</div> 
</body> 
</html>

可自己动动手复制以上完整演示代码，自己实例实例增加记忆和使用技巧知识

演示效果图：

谷歌浏览器、safari单独的CSS hack webkit
css hack演示图

说明：左边下方为IE浏览器显示效果，右边上方为谷歌浏览器显示效果，很明显Chrome支持独有生效的此CSS hack代码。

总结：只需要谷歌浏览器识别的样式选择器，我们用以下代码包裹（新建CSS样式选择器放入花括号中，这样实现只有Chrome识别解释）即可：

@media screen and (-webkit-min-device-pixel-ratio:0) {  
 
/*这里放新建的CSS选择器*/ 
 
}