欢迎来到 jackNEss'窝窝
I like simple mind

ie下的alpha滤镜与png24图片引发的bug重现与修复

2012年11月20日

ie下的alpha滤镜与png24图片引发的bug重现与修复

在最近的项目中(虽然最后居然腰截不上了),做到一个比较特别的幻灯切换效果,如图

演示地址:http://www.jackness.org/lab/2012/alpha_png24bug/real/html/kg_mobile_v.1.html

上面演示地址中,产品图片保持不变,更换的只是背景和介绍文字(当然,真正的成品上还有产品名称和微博分享区域,这些都是不需要随背景改变而改变的,在这里为了说明问题,我就把这些部分都去掉免得干扰视线了)。根据预期效果,每次切换背景图片时,介绍文字都必须从右边淡入。

为了减少http请求数,我决定把这些必须做成png24的图片素材合并到一张大的png24图片上,将其当做是背景设置到等大的div元素上,再通过定位这div元素来达到在ie6下都能在filter渲染png24图片的同时还可以定位。在做这个控件的时候,参考了QQ空间的做法(说白了其实就是抄QQ空间的这效果),发现他的文字是一张一张的png24图片,并没有合并起来,我还想着tx前端们怎么不合并来减少http请求呢(后来才发现这样做是有原因的)。

使用 ie6,ie7,ie8 原生浏览器(而不是打开ie9然后f12调整浏览器模式的那种) 查看上面的演示地址,你会发现…刚开始还好好的,但是图片一切换,文字就出现了黑森森一坨东西在四周,png24半透明失效了!

关键是,其实我只是给ie6单独弄了个png24的滤镜样式,而ie7,ie8由于支持png24图片,我并没有给他们俩加任何滤镜,如果说这个是 ie6的滤镜惹的祸 那ie7,ie8是干嘛了呢?

bug重现

经过多番研究和勘测,我发现这个bug出现必须具备以下条件:

1.图片为png24格式

2.使用了 IE的 alpha滤镜: filter:alpha(opacity=xx)

3.在这里分2种情况:

若是在没有使用png24透明滤镜的情况下(一般为IE7,IE8,而IE6为了正常显示png24图片一般都会加上png24透明滤镜的),只要有调用alpha滤镜,并且png24所在元素 position为 static,png24图片的alpha图层都会失效,半透明部分出现黑边

若在使用png24透明滤镜的情况下,若图片所在的元素被挪动过位置,包括使用 top,left,bottom,right,margin 等,让被png24滤镜渲染过的图层上方显示不全(如:margin-top:-150px 或者 top:-150px,不过 margin-top:150px 或者 top:150px 是没问题的),的时候,显示不全多少像素 那黑麻麻的黑边就覆盖多少像素的图像。

bug重现地址:http://www.jackness.org/lab/2012/alpha_png24bug/rebuild/demo.html

bug修复

在这里分为可修复和不可修复(可避免)2种状态

可修复类型

这里的可修复是指 在没有使用png24透明滤镜的情况下出现黑边的情况。

只要把png24图片所在元素的 position 改为 absolute 然后对其他元素做出相应的调整即可修复。

修复后地址:http://www.jackness.org/lab/2012/alpha_png24bug/rebuild/debug-ie78.html

不可修复(可避免)类型

这里指的是在使用png24透明滤镜出现黑边的情况下。

在这种情况下我算是想尽办法各种尝试了,最后ie哥还是很顽固不肯屈服….那咱们就来避免一下吧
其实只要我们不对涉及到alpha滤镜和 png24滤镜叠加使用的元素进行定位操作的话,就可以避免的了,简单来说就是如果用了png24图片+png24滤镜的,想再用alpha滤镜的话可以,你就老老实实地一张张分开来别省那几个http请求数玩合并图片了。

修复后地址:http://www.jackness.org/lab/2012/alpha_png24bug/rebuild/debug-ie6.html

分类bug整理
阅读 1,059
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS