关于浏览器兼容的一些解决方案

1、使用CSS之前先查CSS的兼容性(MDN、caniuse）
2、使用html5shiv.js之类的用JS插件实现兼容
3、使用@support属性进行兼容（然而这个属性本身的兼容性也不怎么样）
4、针对IE的兼容可使用条件注释










用于非 IE 
在html添加class有个好处可以让我们专门为IE写类似".IE6 + 选择器"这样的代码来实现对IE6的一个兼容.

5、使用CSS的层叠原理（即写在后面的属性会覆盖前面的属性）

div{
     display:block;
     display:flex;
}
//上面的代码在高级浏览器下flex会覆盖block，在低版本浏览器下display:flex会被自动忽略

6、了解浏览器的怪癖

比如在IE6下所有属性的前面可以加一个"_"如"_width:50px"、"_height:50px"，这样写的宽和高会被IE自动解析为width：50px height：50px.所以我们在高级版本的浏览器为了兼容IE6的话可以这样写`

width:50px;
_width:100px;
//这行代码在高版本浏览器下第二行的_width属性会被忽略，所以高度为50px，然而再IE6下由于IE6认识_width属性，所以第二行代码会覆盖第一行代码，这样在IE6下的宽度就为100px了

同理IE7认识的写法为*+属性，即"*width:50px".

IE6到IE8会认识"color:#FFF\9"这样的属性其他的浏览器则不认识

color:red;
color:*blue;
color:_green;
color:pink\9;
//这行代码的在各个浏览器的表现为：高版本浏览为红色，IE7为绿色，IE6位蓝色，IE8为粉色

综上：在IE6~8版本的hack为
IE6认识"_" ," * " ,"\9"
IE6认识" * " , "\9"
IE8认识"\9"

7 IE6到7上的选择器的兼容问题

IE6不支持多个组合选择器如
p.class-a.class-b{}会被IE6解释成 p.b{}
2.不支持父子、兄弟选择器如1
E>F 和 E+F和 E~F等选择器无效
2、不支持伪元素如:after :before
3、IE不支持属性选择器如input(type=text)
4、IE6 非链接元素不能使用:hover 和:active
5、IE6~7不支持:focus

8、CSS3选择器的兼容性

基本上大部分CSS3只支持IE9+
移动端绝大部分都支持

9、IE6不支持min-height/width max-height/width

但是IE6_height行为和min-height是一样的（但是不能写overflow:hidden）
min-width则用一个高1px的元素去撑
max-width/height解决方案：用JS

10、IE6不支持fixed 可以用以下方案

   {
        position:fixed;
        position:_absolute;
        top:0;
        left:0;
}

IE的opacity替代方案:

filter:alpha(opacity=50)

11、IE6浮动双边距Bug

 .selector{
        float:left;
   /* IE6下显示为20px */
        margin-left:10px;
}

解决方案

.selector{
    float:left;
    margin-left:10px;
    _display:inline;
//或者_margin-left:5px（但是维护性不好，不推荐）
}

12 测试浏览器兼容性

1、虚拟机
2、browsersync
3、brwoserstack

13、CSS-Polyfill

1.selectivizr
2.CSS3 PIE
3.box-sizing-polyfill
4.flexibilty
5.cssSandpaper