解决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外都设置为不透明即可解决
周末写了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外都设置为不透明即可解决
相关文章推荐
- IE6 透明PNG图片BUG解决办法(转)
- 使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
- 解决ie6下png背景不能透明bug
- OpenGL ES 设置透明度不能【双面透明】的问题解决办法
- 解决IE6下select无法设置选中的BUG
- ie6下 line-height设置行高失效bug解决办法
- IOS 设置透明度导致底层View始终可见
- IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法
- IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法
- IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法
- ie6-bug:png透明导致的事件无效
- 使用DD_belatedPNG完美解决png在ie6下不透明的bug
- IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法
- 解决IE6下超链接导致GIF动画停止的bug
- IE6中设置了float:left导致margin出现双倍边距的解决方法
- IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法
- 【iOS-Cocos2d游戏开发之七】在cocos2d中添加/删除系统组件,并解决View设置透明会影响View中的其他组件的问题!【11月28日更新解决添加组件Cocos2d动画停止播放的BUG】
- IOS 设置透明度导致底层View始终可见
- [置顶] android设置一张图片透明度导致其在多个activity里均是透明的问题