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

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

 

看完上面的，您可能注意到我用到了半透明背景色的rgba写法，也知道这东西兼容性也就那样，因此为了IE六、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浏览器测试是没有问题的啊！(/ □ \)