先从问题出发:
现象:
今天在项目中发现一个在IE9下的bug,现象是IE9下背景为不透明,而在IE8,IE10以及firefox,chrome下都是正常的,如下图:
IE9的效果,背景为纯白色,
IE8,IE10,firefox,chrome的透明效果
调查过程:
1.查看代码:
css中对li标签设置的是
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#BF494949,endColorstr=#BF494949);background-color:rgba(0, 0, 0, 0.3)
2.补习一下代码中相关知识
(只有真正了解了原代码,才能在针对原代码做自如的修改)
filter:progid:DXImageTransform.Microsoft.gradient(enabled=bEnabled,startColorStr= ,endColorStr= )
属性:
enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 true | false
true: 默认值。滤镜激活。
false:滤镜被禁止。
startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。
- 格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。
- 取值范围为 00 - FF 。 RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。 取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。
EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。
目前IE6-IE9都支持,包括IE9
background-color:rgba(0, 0, 0, 0.3)
这是css3的一个样式,
语法:
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数| 百分数
A:透明度。取值0~1之间
目前IE9以及IE9以上,firefox,chrome都支持。
可以参照给文章http://www.w3cplus.com/content/css3-rgba,比较详细。
3.问题找到了
由上面两个知识中发现,IE9是同时支持的,这就是说为什么IE8和IE10都正常,然后打开F12查看
而IE8和IE10分别支持其中一个。
接着在F12中将filter的样式去掉,发现效果是OK的;将filter勾选,然后将background-color去掉,发现透明效果不是很好,可见IE9对其支持度还不够。
接下来就是如何修改了。
- 在html中常用的是条件注释,如:
<!--[if IE 9.0]>
- 在js中又采用版本判断
if(navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g,"") == "MSIE9.0")
- 但现在是在css文件中去判断,思前想后用hack判断吧,因为IE9支持@media all所以采用以下的方式
@media all and (min-width:0) {
li{filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr=#BF494949,endColorstr}
将enabled改为false即可,这样在IE9就可以,而IE9以上及firefox,chrome因为不识别filter:progid,所以不做处理,从而达到兼容性。
4.额外透明的方法
- opacity:取值范围是0-1,1代表不透明,如opacity(1);
问题:会造成不单该元素自身背景透明了,它的子元素会继承opacity属性,也会透明.
- png-8的透明图片
问题:采用透明图片可以实现,但IE6下会有问题,同时图片相对js代码以及css来说,所需要的网络请求大,会影响页面的速度
5.调查该问题参考的文章:
http://www.w3cplus.com/content/css3-rgba
http://www.cnblogs.com/mizzle/archive/2012/04/05/2432752.html
http://www.footya.com/?action=show&id=114
http://angeldhp.iteye.com/blog/146612