选择器兼容问题：

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