你的位置:首页 > 软件开发 > 网页设计 > 主流浏览器css兼容问题的总结

主流浏览器css兼容问题的总结

发布时间:2016-03-14 23:00:06
最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼。现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑。主要测试了chrome,firefox,ie8、9、11,360浏览器。 一、基本的css兼容:1、可能很多人 ...

主流浏览器css兼容问题的总结

最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼。

现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑。主要测试了chrome,firefox,ie8、9、11,360浏览器。

 

一、基本的css兼容:

1、可能很多人喜欢用css hack的形式去兼容ie浏览器,但是我自己用起来感觉其实不好使 。ie7-就不考虑了,问题在哪呢,就在ie8的甑别上,你怎么让样式只对ie8起作用。上网搜你可能会得到这样的答案:

.selector {  color: #ff0\0;/*ie8*/  color: #f00\9\0;/*ie9+*/}

然后可以抛出一个问题了:

对于下面的文档结构,分别对 p | .p | div p | .parent | #parent设置color属性,那么优先级如何呢?

<div id="parent" class="parent">

也就是 .p > div p > p > #parent > .parent

id选择器居然比p选择器优先级还低!将p元素和div元素分开看,.p > div p > p 很正常, #parent > .parent也很正常。所以问题关键在子级p和父级#parent, 子级的选择器优先级比父级的选择器优先级高,或者说继承的优先级程度比自身的优先级低!

嵌套多一层看看就知道是不是了,分别对#parent | div | p设置color属性:

 

<div id="parent" class="parent"> <div class="mid">  <p id="p" class="p">p</p>  <div></div>

原标题:主流浏览器css兼容问题的总结

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。