css兼容性解决方案
2017-01-03 本文已影响151人
xiayujlu
一.降级方案：
情况一：如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配合
<!-- [if lt IE 7] -->
<html class="ie6">
<![endif]-->
4.利用浏览器怪癖
selector{
color:blue; /*正常浏览器识别blue*/
color:red/9; /*IE8识别red*/
*color:green; /*IE7识别green*/
_color:yellow; /*IE6识别yellow*/
}
