safari的webkit核心浏览器css代码

2019-09-07 郑州网站建设  

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

咱们知道和会运用CSS IE 火狐浏览器之间的分辨DIV+CSS HACK,这里为大家再先容下鉴别google浏览器(Chrome)苹果涉猎器(safari)与IE之间的hack;

只有网站kit中心涉猎器的谷歌阅读器、safari阅读器识其他CSS hack

Chrome和safari的CSS hack代码,只有google阅读器苹果阅读器读取CSS代码:

@media screen and (-站点kit-min-device-pixel-ratio:0) { 

 

/* Webkit内核兼容CSS选择器名堂 放到这里 */ 

 

典范:

 @media screen and (-网站kit-min-device-pixel-ratio:0) { 

.yangshi1{color:#f00} 

.yangshi2{border:1px solid #f00;} 

.yangshi3{bac公斤round:#f00;} 

HTML代码:

 <div class="yangshi1">css款式1</div><br /> 

<br /> 

<div class="yangshi2">CSS5格局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>google浏览器和safari  网站kit独占辨别其它涉猎器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.css5.com.cn">css</a>花样1</div><br /> 

<br /> 

<div class="yangshi2"><a href="//www.css5.com.cn">CSS5</a>款式2</div><br /> 

<br /> 

<div class="yangshi3"><a href="//www.css5.com.cn">div+css</a>款式3</div> 

</body> 

</html> 

可本人动脱手复制以上完整演示代码,自身实例实例增进回想和使用能力常识

演示造诣图:

google浏览器、safari单独的CSS hack webkit

css hack演示图

说明:左边下方为IE涉猎器体现造诣,左边上方为谷歌浏览器透露表现功效,很显明Chrome赞成独有收效的此CSS hack代码。

总结:只须要谷歌涉猎器识另外款式决定器,咱们用如下代码包裹(新建CSS花式决意器放入花括号中,如许完成只有Chrome识别正文)便可:

@media screen and (-站点kit-min-device-pixel-ratio:0) {  

 

/*这里放新建的CSS决议器*/ 


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1036.html转载请标明出处,谢谢合作!
标签:
  • css
  • 代码
  • 浏览器
  • safari
  • 核心
  • webkit