前两天,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动画中失效问题记录的更多相关文章

  1. js进阶 13-1 jquery动画中的显示隐藏函数有哪些

    js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()h ...

  2. ie8 下的半透明 background:rgba 与opacity失效 兼容办法

    fliter: filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);

  3. jQuery动画中stop()与 finish()区别

    stop():接受三个参数,(要停止的动画名称:是否清空队列中的动画:是否当前动画立即完成) stop()相当于stop(false,false)表示停止执行当前动画,后续动画接着进行 stop(tr ...

  4. 【转载】jQuery动画中的queue()函数

    原文链接:http://www.cnblogs.com/hh54188/archive/2011/04/09/1996469.html 原文摘要:当你使用一系列的动画效果(如hide,show),这些 ...

  5. IE8下ckeditor无法正常使用,提示"例外被抛出且未被接住"的解决办法

    <script language="javascript" src="ckeditor/ckeditor.js"></script> & ...

  6. js进阶 13-6 jquery动画效果相关常用函数有哪些

    js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...

  7. ie8下jquery改变PNG的opacity出现黑边

    复制网上的,没有他们那个类型的博客,所以就直接复制了 这些天在做一个效果,鼠标经过,PNG图片由透明变成不透明,jquery代 码:$(element).animate({"opacity& ...

  8. ie8下jquery改变PNG的opacity出现黑边,ie6下png透明解决办法

    目前互联网对于网页效果要求越来越高,不可避免的用到PNG图片,PNG分为几种格 式,PNG8 PNG24 PNG32,其中最常用的,也是显示效果和大小比较适中的则是PNG24,支持半透明,透明,颜色也 ...

  9. IE8下兼容rgba颜色的半透明背景

    在工作中做一个图片半透明遮罩时发现在IE8下不兼容 一查再知道IE8不支持rgba颜色,再搜搜兼容性方法,没想到这么快就解决了. 先说说rgba的含义: r代表red,g代表green,b代表blue ...

随机推荐

  1. Eclipse 代码自动补全

    使用Eclipse开发Android时,发现代码补全功能太差,完全不像VS似的,输入一个字母就出现代码提示. 下面是在Eclipse中实现类似VS代码补全的方法: ①打开Eclipse->Win ...

  2. VSTO:无法安装此应用程序,因为已安装具有相同标识的应用程序

    原文:VSTO:无法安装此应用程序,因为已安装具有相同标识的应用程序 在开发环境(Win7+VS2010+Outlook 2010)上做一个Outlook AddIn,运行Outlook时报如下错误: ...

  3. poj 2432 Around the world bfs+哈希

    由于每个点的状态包含走过来的距离,所以要存二维的状态,但是状态总量太多,所以可以用哈希来搞. 那么就是bfs最短路,哈希记录状态了. #include <iostream> #includ ...

  4. Strange Way to Express Integers (一般模线性方程组)

    Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 8476   Accepted: 2554 Description Elin ...

  5. 【枚举】Vijos P1012 清帝之惑之雍正

    题目链接: https://vijos.org/p/1012 题目大意: 给n个坐标(n<=100 000),求直线距离最短是多少.数据较大用long long 或 double 题目思路: [ ...

  6. 暴力求解——POJ 3134Power Calculus

    Description Starting with x and repeatedly multiplying by x, we can compute x31 with thirty multipli ...

  7. 数据结构——foodfill 八连块问题

    Description Due to recent rains, water has pooled in various places in Farmer John's field, which is ...

  8. Android开发必知--自定义Toast提示

    开发过Android的童鞋都会遇到一个问题,就是在打印Toast提示时,如果短时间内触发多个提示,就会造成Toast不停的重复出现,直到被触发的Toast全部显示完为止.这虽然不是什么大毛病,但在用户 ...

  9. Linux 相关scsi命令

    Linux 相关scsi命令 由于前段时间存储扩容,对存储操作较多,下面记录了常用的操作: lsscsi命令:显示scsi设备信息 #lsscsi [0:0:0:2]    disk    IBM   ...

  10. 【repost】如何学好编程 (精挑细选编程教程,帮助现在在校学生学好编程,让你门找到编程的方向)四个方法总有一个学好编程的方法适合你

    方法(一)编了这么久的程序,一直想找机会总结下其中的心得和方法,但回想我这段编程道路,又很难说清楚,如果按照我走过的所有路来说,显然是不可能的!当我看完了云风的<游戏之旅--编程感悟>和梁 ...