IE8-下背景色半透明滤镜在jquery动画中失效问题记录

前两天，UIer跟我说，把这些按钮都悬浮在这个图片上！我心中千万头草泥马奔过，图片各种各样、花花绿绿、五颜六色的，这几个按钮也没有多大的光环围绕，用户一眼看上去恐怕会以为这是图片的一部分吧！~~~我假装很淡定的跟她说了这个东西带来的影响，并且信誓旦旦的说我目前为止还没见过这种形式的图片展示（按钮就是什么下一张、上一张，第三张，最后一张…扁平化风格的）。于是她就开始临时思考怎么办了。我当时手贱，跑去CSS那边给按钮模块的背景色加了一个rgba(0,0,0,0.5),刷新一下！“半透明效果不错哦！那就用这种形式吧！你把这个的位置再往这边点（→边）！”我已经无力吐槽了…

看完上面的，您可能注意到我用到了半透明背景色的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浏览器测试是没有问题的啊！(/ □ \)

转载于:https://www.cnblogs.com/gradolabs/p/3677023.html

IE8-下背景色半透明滤镜在jquery动画中失效问题记录相关推荐

六、jQuery动画特效（一）
jQuery动画特效 jQuery动画特效 1.显示和隐藏 2.淡入与淡出 3.向上或向下滑动往期回顾 jQuery动画特效 1.显示和隐藏在 JavaScript 中,如果需要显示或隐藏网页 ...
js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些一.总结一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
ie8下jquery改变PNG的opacity出现黑边,ie6下png透明解决办法
目前互联网对于网页效果要求越来越高,不可避免的用到PNG图片,PNG分为几种格式,PNG8 PNG24 PNG32,其中最常用的,也是显示效果和大小比较适中的则是PNG24,支持半透明,透明,颜色也 ...
rgba背景是黑灰色html,IE8下兼容rgba颜色的半透明背景_html/css_WEB-ITnose
在工作中做一个图片半透明遮罩时发现在IE8下不兼容一查再知道IE8不支持rgba颜色,再搜搜兼容性方法,没想到这么快就解决了. 先说说rgba的含义: r代表red,g代表green,b代表blue ...
IE8下Jquery获取select选中的值的问题
我们一般使用jQuery获取select时,一般这么用: <select id='a'><option selected='selected' value='1'> </ ...
jQuery UI在Server 2008 IE8下DatePicker问题修复
这真是个WTF的问题,类似参见Stack Overflow 这个DatePicker问题只在Server 2008的IE8下出现.至于为什么win7的IE8支持,Server2008的IE8不支持,就 ...
IE8下JQuery clone 出的select元素使用append添加option异常解决记录
IE8下JQuery clone 出的select元素使用append添加option异常解决记录参考文章: (1)IE8下JQuery clone 出的select元素使用append添加opti ...
jQuery easyui 1.3.2 在IE8下dialog最大化还原后，layout变乱
这个是jQuery 1.8有些效果在IE8下失效造成的, 用火狐没问题, 换成引用jquery-1.7.2.min.js也没问题, 目前没有空去想解决办法只好降级了,换jQuery easyui 1 ...
IE8下,iframe页面jQuery 1.x调用foucs报“未指明的错误”
环境 IE8 jquery 1.11.3 错误描述在iframe页面中用到了jquery,那么在加载iframe页面时会报错.(未指明的错误). 通过报错信息找到报错的代码片段 "focu ...

IE8-下背景色半透明滤镜在jquery动画中失效问题记录

IE8-下背景色半透明滤镜在jquery动画中失效问题记录相关推荐

最新文章

热门文章