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浏览器测试是没有问题的啊！(/ □ \)