css兼容性解决方案

一.降级方案：

情况一：如box-shadow，border-radius等属性低版本浏览器不支持。

解决方案：不支持就不支持，不影响页面的主要效果。

情况二：如vh，vw等单位低版本浏览器不支持。

解决方案：用效果稍差一点的方案解决，如height:100vh，用height:800px代替。

情况三：如opacity:0.5等低版本浏览器不支持。

解决方案：低版本IE下用特有的属性，filter:alpha(opacity=50)。

情况四：如HTML5新增标签，IE6不支持半透明图片等。

解决方案：这类问题可以用JS解决，如htmlshim.js让IE6-8支持部分HTML5新标签。DD_belatedPNG.js让IE6支持半透明图片。

二.不同的浏览器使用不同的样式：

1.@supports

.contairner{
  display:flex;
}
@supports (display:grid){
  .contianer{
    display:gird;
  }
}

但是@supports自身兼容性就不是很好，IE11都不支持。

2.层叠

同一个属性后面的会覆盖前面的，浏览器会忽略不识别的属性

div{
  dispaly:table;
  display:fled; 
}

3.条件注释与HTML配合

4.利用浏览器怪癖

selector{
  color:blue; /*正常浏览器识别blue*/
  color:red/9; /*IE8识别red*/
  *color:green; /*IE7识别green*/
  _color:yellow; /*IE6识别yellow*/
}