CSS-CSS中如何设置让某些css代码只对webkit浏览器生效?

CSS-CSS中如何设置让某些css代码只对webkit浏览器生效?

泛泛之交 发布于 2017-10-10 字数 144 浏览 1221 回复 2

目前需要针对webkit浏览器作一些hack,如何设置让某些css代码只对webkit浏览器生效?
记得之前用过@media的方法,如此之前有没有更好的方法?

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

归属感 2017-10-25 2 楼

你说的应该是这个:

@media all and (-webkit-min-device-pixel-ratio: 1){
selectors {
properties: values;
}
}

参考:http://www.evotech.net/blog/2011/04/hack-for-webkit/

晚风撩人 2017-10-23 1 楼

兼容浏览器的写法有很多,我知道的是目前没有针对哪个内核的兼容性写法,只有针对不同版本的浏览器,例如IE6、IE7、IE8、IE9,每个写法都不一样,就算是同样内核的浏览器也会有不同,所以具体要兼容哪些浏览器,还要看具体需求。附上一个网上很全的浏览器兼容写法图,供你参考吧

color:red; /* 所有浏览器都支持 */
color:red !important; /* 除IE6外 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
+color:red; /*IE7支持*/
*+color:red; /* IE7支持 */
color:red9; /* IE6、IE7、IE8、IE9支持 */
color:red; /* 针对所有IE */
color:red; /* IE8、IE9支持 */
color:red9; /*IE9支持*/
/* webkit and opera */
@media all and (min-width: 0px){ div{color:red;} }
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ div{color:red;} }
/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { div{color:red;} }
/* firefox * /
@-moz-document url-prefix(){ div{color:red;} } /* all firefox */
html>/**/body div, x:-moz-any-link, x:default {color:red;} /* newest firefox */
body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
<!-[if IE 7]> = 等于 IE7
<!-[if lt IE 8]> = 小于 IE8(就是 IE7 或以下了啦)
<!-[if gte IE 8]> = 大于或等于 IE8 
<meta http-equiv="x-ua-compatible" content="ie=7" />

把这段代码放到<head>里面,在ie8里面的页面解析起来就跟ie7一模一样的了

<!-[if IE]>
<link rel="stylesheet" href="/ie-all.css" type="text/css" media="screen" />
<![endif]->
<!-[if lt IE 8]>
<link rel="stylesheet" href="/ie.css" type="text/css" media="screen" />
<![endif]->
<!-[if IE 7]>
<link rel="stylesheet" href="/ie7.css" type="text/css" media="screen" />
<![endif]->
<!-[if IE 6]>
<link rel="stylesheet" href="/ie6.css" type="text/css" media="screen" />
<![endif]->