关于ie8的滤镜

作为前端,经常碰到有关ie8的兼容问题,好好的样式写上,在其他浏览器非常“完美”,但一看ie8就“完蛋”了。

下面是开发中遇到的几种解决ie8下css样式不兼容的办法,记录一下,以供积累,后续遇到再补充:
1、ie8不支持opacity:
.opacity{
-khtml-opacity:0.6;
-moz-opacity:0.6;
filter:alpha(opacity=60);
filter:"alpha(opacity=60)";
opacity:0.6;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
2、ie8不支持background-size:
.bg{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png', sizingMethod='scale');
-ms-filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png', sizingMethod='scale');
}
3、ie8不支持rgba():
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7Fffffff,endColorstr=#7Fffffff);
这句本来是用在渐变中的,但如果不需要渐变,只要半透明效果的话,两个色值设置成一样就可以。
值得注意的是:“7Fffffff”是由两部分组成的,“7F”是透明度0.5的IEfilter值,
从0.1到0.9每个数字对应一个IEfilter值。对应关系如下:
rgba 和IE下filter数值的转换
rgba 透明值 IEfilter值
0.1 19
0.2 33
0.3 4C
0.4 66
0.5 7F
0.6 99
0.7 B2
0.8 C8
0.9 E5

直接取整计算的,没有进位直接舍去,alpha*255再转换成16进制即可。