解决IE6,IE7,IE8不兼容rgba()的兼容性问题

之前说我把论坛做了下扁平化,后来有人发帖反映说背景全部透明了,开始我还不以为然,以为那家伙用的IE6,今天又有人发帖说这事儿我就觉得不对了。后来查了一下发现IE8及以下都是不支持rgb的alpha通道的|(*′口`)  用IEteser一看,果然是这样,于是google了一下解决兼容性的方法,查到一篇很不错的博文,copy过来记录一下:

一、使用rgba()样式

下面是文档:

div.inner使用半透明背景,文字p为白色。一般情况是这样处理的:

对于支持CSS3的浏览器是完全没有问题的,但是在IE8及以下这样写就不兼容了。

IE6、IE7和IE8不支持rgb()中的alpha通道,rgba()他们不认识就不解析,所以背景是全透明的,没有达到预期效果。

IE9 FireFox Chrome Safari Opera

IE6 IE7 IE8

image_thumb5 image_thumb6

可以看到,支持rgba()的浏览器半透明效果很好!背景透明,子节点的文字依然不透明。

二、使用rgb()和opacity

同样的结构,我们换个样式,使用rgb()和opacity,因为IE8及以下不支持opacity,因此使用filter属性。filter属性在非IE浏览器下均不能识别。

这样的做法就能支持大部分的浏览器了,除了IE6。

FireFox Chrome Safari Opera IE9 IE8 IE7

IE6
image_thumb7 image_thumb8

可以看到,背景虽然是透明了,但是文字也跟随着透明了。这样的情况在IE8及以下比较好解决,反而比较标准的浏览器就不好解决了。

注:在IE9中opacity和filter它都能解析,如果两个同时存在,则以透明度较低即数字较大的为准,不会叠加。例如:filter:alpha(opacity=80);opacity:0.5;它会以80%的透明度来解析。

在IE8和IE7中对文字的节点添加“position: relative;”样式就能实现文字不透明了。

效果图:

image_thumb9

三、总结

在文档结构不能修改的情况下,遇到这样的问题我们可以这样解决。

  1. 对支持CSS3的浏览器使用rgba()来实现;
  2. 对IE8和IE7使用rgb()、opacity和position:relative来实现;
  3. 对于IE6可以使用1像素图片repeat来实现。

而我们往往希望使用一套代码简洁的来实现这样的效果,下面我想到两个方案来实践:

方案一:使用图片来替代。

如果你的站点打算兼容IE6而且这样的使用范围广的话,那毫不犹豫的使用上面说到的使用图片,并且在IE6下需要对图片加上IE滤镜,这样做的同时对这张1像素图片进行做data-uri转码,直接写进样式表中。不过滤镜只能使用在背景图为no-repeat的情况下,所以,完美的做法需要加上js来使它透明化。

js脚本处理,这里使用了jQuery和fixPNG()方法。

 方案二:不使用图片,舍弃IE6。

如果你的站点不打算兼容IE6,在IE6下背景色全黑影响不大的话,我们考虑使用hack。

同时将上面说到的第1点和第2点同时写进样式表,这样做的会产生一个问题。在IE9中,它既支持opacity又同时支持filter!所以这样在IE9下变得非常的透明!因为它在rgba()中已经半透明了,解析到filter或者opacity属性时又再透明一次,做了叠加!

所以可以这样写:

上面的样式表中使用了IE9特有的hack标记”9”,使背景色被黑色覆盖。

注:注意上面属性的抒写顺序,且只能使用16进制表示颜色,不能使用rgb()。

方案三、洁癖方案。

这个方案综合了方案一和方案二,使各浏览器下的效果都一致。

css可以这样写:

bootstrap框架中,less可以这样写:

四、测试页面

测试地址:

https://sell.moe/9edf

原文地址:

https://sell.moe/ne4s

这篇文章有4条评论

  1. Moon 2013/11/23 #1 回复TA

    这个显示代码的插件叫什么…比我的好看多了(´゚Д゚`)

  2. kami 2013/12/1 #2 回复TA

    笨蛋柚子,解决方案如下。
    background: rgba(255, 255, 255, 0.5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #50FFFFFF,endColorstr = #50FFFFFF);

    第一排半透明
    第二排专门触发低版本浏览器的半透明属性

发表评论

*

List
Love
00:00