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瀏覽器測試是沒有問題的啊！(/ □ \)