您的位置:首页 > 其它

解决ie6下 filter设置透明度 导致全透明不可见的bug

2014-07-19 16:52 239 查看
虽然是小众bug,但查遍全网都没有解决方案,就写出来了。

周末写了3个比较复杂的jquery插件,其中一个效果是用js把一个div自动做成如图1的效果



图1
主要是边框是半透明的,这个效果网上有css实现方法,是把一个back div元素设为绝对浮动,半透明,top0,left0.主体框whole div 设置padding即可实现外框半透明,内框不透明的非继承特殊效果。

然后点击拖拽的时候整体whole又会半透明如图2:



图2
写完之后其他浏览器一切安好,但在虚拟机的ie6下查看,狗血的事件来了:如图3



图3
除了做背景的back div外整个没了,但我点点里面,实际上还是有元素的,说明遇到了透明度为0 bug(这个bug我还在8年前的ie6文字外发光特效上见过)

无奈调试了半天,比我写完这个效果插件时间还长。。刚开始是查找到底哪里一步导致这种情况。最后查出是拖拽时设置透明度惹的祸。如果不设置拖拽时半透明,倒是没这个bug,但是我并不甘心直接将这个效果取消,随后,在mousedown事件之前加入:

$(whole).children(":not(.popdiv_back)").css("opacity",1)

即whole层的子元素,除了做黑边框的back div外都设置为不透明即可解决
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: