1、使用CSS之前先查CSS的兼容性(MDN、caniuse）
2、使用html5shiv.js之类的用JS插件实现兼容
3、使用@support属性进行兼容（然而这个属性本身的兼容性也不怎么样）
4、针对IE的兼容可使用条件注释
<!--[if IE]><html class='IE' ><![endif]-->
<!--[if IE 6]><html class='IE6' > <![endif]-->
<!--[if IE 7]><html class='IE7' > <![endif]-->
<!--[if IE 8]><html class='IE8' > <![endif]-->
<!--[if IE 9]><html class='IE9' > <![endif]-->
<!--[if gt IE 6]> 用于 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用于 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用于 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用于 IE9 以下版本<![endif]-->
<!--[if !IE]> -->用于非 IE <!-- <![endif]-->
在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
网友评论