IE8-下背景色半透明滤镜在jquery动画中失效问题记录
2014-04-20 20:04
465 查看
前两天,UIer跟我说,把这些按钮都悬浮在这个图片上!我心中千万头草泥马奔过,图片各种各样、花花绿绿、五颜六色的,这几个按钮也没有多大的光环围绕,用户一眼看上去恐怕会以为这是图片的一部分吧!~~~我假装很淡定的跟她说了这个东西带来的影响,并且信誓旦旦的说我目前为止还没见过这种形式的图片展示(按钮就是什么下一张、上一张,第三张,最后一张…扁平化风格的)。于是她就开始临时思考怎么办了。我当时手贱,跑去CSS那边给按钮模块的背景色加了一个rgba(0,0,0,0.5),刷新一下!“半透明效果不错哦!那就用这种形式吧!你把这个的位置再往这边点(→边)!”我已经无力吐槽了…
看完上面的,您可能注意到我用到了半透明背景色的rgba写法,也知道这东西兼容性也就那样,所以为了IE6、7,不得已又要去加个filter。
浏览图片的形式:点击小图→模态弹窗
以上是个大概形式,并不是实际的代码,比如模态的遮罩就没有。
然后呢,我在排查兼容性问题的时候,用ietester678都没问题,然后其他ff、chr、saf……最后我来到ie8的浏览器模式ie7的文档模式,ie7的浏览器模式,ie7 的文档模式……完蛋了!怎么没有背景色呢。赶紧F12,咦……这filter滤镜也在啊!!!怎么就没效果呢……
在各种纠结了20来分钟后,决定单独写个页面试试这个问题……发现,如果一开始模块就是显示的,那么调整浏览器模式、文档模式都没影响。我就想是不是不应该用display:none 的形式,jquery的show、hide都是修改的display属性。于是我又给模块加上了cilp这个css属性:
然后在jquery里面写显示效果的时候是通过.css("clip","rect(0 width height 0)");
保存、刷新、哈哈哈,虽然没有动画效果了,但是至少不会没半透明背景色了!!!囧、失败感……
我觉得我应该没有找到根本原因,于是我在无意中,把show()里面的参数去掉试了试,结果……泪奔~~~这样也是可以的啊!啊啊啊!!!
虽然我最终还是没有找到原因,但我还是弱弱问下各位,是否是因为filter滤镜(半透明背景色滤镜,其他半透明背景色的滤镜还有吗?敬请告知,感激不尽)在不同的排版渲染引擎中存在兼容问题呢?可是单独以IE6 7浏览器测试是没有问题的啊!(/ □ \)
看完上面的,您可能注意到我用到了半透明背景色的rgba写法,也知道这东西兼容性也就那样,所以为了IE6、7,不得已又要去加个filter。
.m-btn { height: 32px; background-color: rgba(0,0,0,0.5); =filter : progid:DXImageTransform.Microsoft.Gradient ( startColorStr=#88000000 , endColorStr=#88000000 ) display: block; }
浏览图片的形式:点击小图→模态弹窗
$("img").live('click',function(){ $(".m-btn").show(500); });
以上是个大概形式,并不是实际的代码,比如模态的遮罩就没有。
然后呢,我在排查兼容性问题的时候,用ietester678都没问题,然后其他ff、chr、saf……最后我来到ie8的浏览器模式ie7的文档模式,ie7的浏览器模式,ie7 的文档模式……完蛋了!怎么没有背景色呢。赶紧F12,咦……这filter滤镜也在啊!!!怎么就没效果呢……
在各种纠结了20来分钟后,决定单独写个页面试试这个问题……发现,如果一开始模块就是显示的,那么调整浏览器模式、文档模式都没影响。我就想是不是不应该用display:none 的形式,jquery的show、hide都是修改的display属性。于是我又给模块加上了cilp这个css属性:
.m-btn { height: 32px; background-color: rgba(0,0,0,0.5); =filter : progid:DXImageTransform.Microsoft.Gradient ( startColorStr=#88000000 , endColorStr=#88000000 ) clip:rect(0 0 0 0); }
然后在jquery里面写显示效果的时候是通过.css("clip","rect(0 width height 0)");
保存、刷新、哈哈哈,虽然没有动画效果了,但是至少不会没半透明背景色了!!!囧、失败感……
我觉得我应该没有找到根本原因,于是我在无意中,把show()里面的参数去掉试了试,结果……泪奔~~~这样也是可以的啊!啊啊啊!!!
虽然我最终还是没有找到原因,但我还是弱弱问下各位,是否是因为filter滤镜(半透明背景色滤镜,其他半透明背景色的滤镜还有吗?敬请告知,感激不尽)在不同的排版渲染引擎中存在兼容问题呢?可是单独以IE6 7浏览器测试是没有问题的啊!(/ □ \)
相关文章推荐
- jquery.form.js ie 下下载文件已经ie8失效问题解决方案
- 解决jQuery在IE7和8下setInterval失效的问题
- jQuery失效问题解决方案
- [故障排除记录]虚拟目录程序中UploadFile控件失效问题的解决方法
- Jquery操作checkbox全选、反选失效的问题解决
- JQuery动画执行中顺序问题
- Android Activity切换动画(解决back键后退失效问题)
- jQuery的属性选择器[@rel*=style]失效问题
- JQUERY解析XML IE8的兼容问题
- 关于jquery中on绑定click事件在苹果手机失效的问题
- 【JQUERY】jQuery的选择器在IE8小[checked]失效的解决方法
- IE8滤镜效果不支持,背景显示为黑色问题解决办法
- 解决jquery-easyui1.3.3 combobox 多选模式不兼容IE8问题
- 解决jQuery-Validate在ie8的兼容性问题(亲测可行)
- jquery.history插件在ie中失效的问题
- jquery中动画(animal)只运行一次的问题!
- 去除微信端点击input和textarea时闪现半透明灰色背景色问题
- 关于火狐中使用jquery的animate做动画效果的问题解决
- vue动画打包后失效问题的解决方法
- jquery radio 动态控制选中失效问题