css选择器与属性的兼容性问题
2017-01-03 本文已影响169人
xiayujlu
选择器兼容问题:
1.css2选择器兼容问题主要出现在IE6-7
- IE6不支持多个类直接组合
如:div.a.b会被当成div.b
解决办法:处理好选择器优先级 - IE6不支持直接子元素,兄弟选择器
如E>F(直接子元素选择器),E~F(相邻兄弟选择器),E+F(兄弟选择器)选择器无效
解决办法:避免使用或换后代选择器 - IE6不支持属性选择器
解决办法:添加class - IE6非链接不支持:hover,:active等伪类选择器
解决办法:用a标签嵌套需要hover的元素 - IE6不支持:first-child选择器
解决办法:添加class - IE6,7不支持伪元素选择器
解决办法:添加html - IE6,7不支持:focus伪类
解决办法:JavaScript解决,添加focus事件
2.css3选择器兼容问题
css3大部分选择器兼容性是IE9+,移动端支持绝大多数css3选择器
3.css2属性兼容问题
主要集中在IE6上,IE7上一小部分属性不支持
- IE6不支持min/max-width/height
min-height解决办法:
selector{
min-height:500px;
_height:500px;
}
min-width解决办法:
<div class="container">
<div class="keke"></div>
<!--content-->
</div>
<style>
.container{
min-width:500px;
}
.container .keke{
height:1px;
width:500px;
}
</style>
max-width/height解决办法:
使用javascript解决
- IE6不支持position:fixed
解决办法:
html,body{
height:100%;
}
.keke{
position:fixed;
_position:absolute;
right:0;
bottom;0;
}
此方法副作用:其它相对于body进行绝对定位的元素也会受到影响
- IE6,7不支持display:inline-block
原本是行级元素支持display:inline-block;而原本是块级元素不支持
解决办法:
selector{
display:inline-block;
*display:inline;
*zoom:1
}
- IE6,7不支持display:table
解决办法:
使用float或inline-block进行布局。
4.css3属性兼容问题
IE6,7不支持,IE8部分支持(box-sizing和outline是支持的),IE9基本支持
- IE8及以下还是使用固定宽度布局
- IE9不支持transition和animation
解决办法:JavaScript解决 - 浏览器厂商为了实验一些特性要加前缀
- Chrome/Safari/Opera:-webkit-
- Miscsoft:-ms-
- Mozilla:-moz-
autoprefixer工具,自动添加前缀