css 选择器 兼容性,css选择器与属性的兼容性问题

选择器兼容问题：

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解决办法：

.container{

min-width:500px;

}

.container .keke{

height:1px;

width:500px;

}

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工具，自动添加前缀