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浏览器测试是没有问题的啊!(/ □ \)
IE8-下背景色半透明滤镜在jquery动画中失效问题记录的更多相关文章
- js进阶 13-1 jquery动画中的显示隐藏函数有哪些
js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()h ...
- ie8 下的半透明 background:rgba 与opacity失效 兼容办法
fliter: filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
- jQuery动画中stop()与 finish()区别
stop():接受三个参数,(要停止的动画名称:是否清空队列中的动画:是否当前动画立即完成) stop()相当于stop(false,false)表示停止执行当前动画,后续动画接着进行 stop(tr ...
- 【转载】jQuery动画中的queue()函数
原文链接:http://www.cnblogs.com/hh54188/archive/2011/04/09/1996469.html 原文摘要:当你使用一系列的动画效果(如hide,show),这些 ...
- IE8下ckeditor无法正常使用,提示"例外被抛出且未被接住"的解决办法
<script language="javascript" src="ckeditor/ckeditor.js"></script> & ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- ie8下jquery改变PNG的opacity出现黑边
复制网上的,没有他们那个类型的博客,所以就直接复制了 这些天在做一个效果,鼠标经过,PNG图片由透明变成不透明,jquery代 码:$(element).animate({"opacity& ...
- ie8下jquery改变PNG的opacity出现黑边,ie6下png透明解决办法
目前互联网对于网页效果要求越来越高,不可避免的用到PNG图片,PNG分为几种格 式,PNG8 PNG24 PNG32,其中最常用的,也是显示效果和大小比较适中的则是PNG24,支持半透明,透明,颜色也 ...
- IE8下兼容rgba颜色的半透明背景
在工作中做一个图片半透明遮罩时发现在IE8下不兼容 一查再知道IE8不支持rgba颜色,再搜搜兼容性方法,没想到这么快就解决了. 先说说rgba的含义: r代表red,g代表green,b代表blue ...
随机推荐
- Eclipse 代码自动补全
使用Eclipse开发Android时,发现代码补全功能太差,完全不像VS似的,输入一个字母就出现代码提示. 下面是在Eclipse中实现类似VS代码补全的方法: ①打开Eclipse->Win ...
- VSTO:无法安装此应用程序,因为已安装具有相同标识的应用程序
原文:VSTO:无法安装此应用程序,因为已安装具有相同标识的应用程序 在开发环境(Win7+VS2010+Outlook 2010)上做一个Outlook AddIn,运行Outlook时报如下错误: ...
- poj 2432 Around the world bfs+哈希
由于每个点的状态包含走过来的距离,所以要存二维的状态,但是状态总量太多,所以可以用哈希来搞. 那么就是bfs最短路,哈希记录状态了. #include <iostream> #includ ...
- Strange Way to Express Integers (一般模线性方程组)
Time Limit: 1000MS Memory Limit: 131072K Total Submissions: 8476 Accepted: 2554 Description Elin ...
- 【枚举】Vijos P1012 清帝之惑之雍正
题目链接: https://vijos.org/p/1012 题目大意: 给n个坐标(n<=100 000),求直线距离最短是多少.数据较大用long long 或 double 题目思路: [ ...
- 暴力求解——POJ 3134Power Calculus
Description Starting with x and repeatedly multiplying by x, we can compute x31 with thirty multipli ...
- 数据结构——foodfill 八连块问题
Description Due to recent rains, water has pooled in various places in Farmer John's field, which is ...
- Android开发必知--自定义Toast提示
开发过Android的童鞋都会遇到一个问题,就是在打印Toast提示时,如果短时间内触发多个提示,就会造成Toast不停的重复出现,直到被触发的Toast全部显示完为止.这虽然不是什么大毛病,但在用户 ...
- Linux 相关scsi命令
Linux 相关scsi命令 由于前段时间存储扩容,对存储操作较多,下面记录了常用的操作: lsscsi命令:显示scsi设备信息 #lsscsi [0:0:0:2] disk IBM ...
- 【repost】如何学好编程 (精挑细选编程教程,帮助现在在校学生学好编程,让你门找到编程的方向)四个方法总有一个学好编程的方法适合你
方法(一)编了这么久的程序,一直想找机会总结下其中的心得和方法,但回想我这段编程道路,又很难说清楚,如果按照我走过的所有路来说,显然是不可能的!当我看完了云风的<游戏之旅--编程感悟>和梁 ...