选择器兼容问题：
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工具，自动添加前缀
