jQuery淡入淡出在IE 8中的陰影？

我有一個圖像，它後面有一個半透明的陰影，我正在用div作爲背景圖像。我遇到了一個問題，當我將div淡入或淡出時，半透明投影會顯示爲黑色，直到淡出完成。當我這樣做在Firefox它工作得很好，我已經使用Internet Explorer 8只能夠重現錯誤jQuery淡入淡出在IE 8中的陰影？

你可以看到它在這裏的行動：http://jsfiddle.net/pVQER/2/

有誰知道爲什麼會發生這種情況？任何人都可以提出一個解決或修復？

UPDATE：

在我的現實世界的例子，這個div是有梯度的另一背景圖像的頂部，所以我不認爲設置背景顏色會工作。

來源

2011-10-07 Abe Miessler

我有同樣的黑影問題......我的情況更糟，因爲元素有圓角，但陰影是方形的。 _「IE只是吮吸」_是我的解釋。 _「刪除IE中的陰影」_是我的解決方案。 – Sparky

我也遇到了同樣的問題，無法找到問題的解決方法。我不得不求助於顯示/隱藏，而不是褪色。 –

這是我對你的CSS所做的更改：

#bg { 
    background:url(http://i.imgur.com/GlEyl.png) 0 0 #fff; 
    height:200px; 
    width:300px; 
    border:1px solid; 
    padding:5px; 
    display:none; 
    }

我在後臺添加的屬性#FFF。這項工作的想法是設置背景顏色以匹配它背後的任何背景。

不是一個很好的修復，但工程。

Link to code »

來源

2011-10-07 17:37:16 magzalez

+1，謝謝你的回答。雖然這在我的小提琴中起作用，但我的真實世界示例將此div放在具有漸變背景的另一個元素上，因此設置背景顏色對我來說不起作用。 –

的一般解IE8的透明褪色問題是包裝與背景的元件的周圍的div元素，設置它的背景色和褪色包裝元素來代替。

HTML：

<div id = 'bgWrap'><div id="bg">test the background</div></div><br/> 
<button id="btn" type="button">Click Me!</button>

CSS：

#bg 
{ 
    background-image:url('http://i.imgur.com/GlEyl.png'); 
    height:200px; 
    width:300px; 
    border:1px solid; 
    padding:5px; 
} 

#bgWrap { 
    dispaly: none; 
    background: #fff; 
}

JS：

$('#btn').click(function() { 
     $('#bgWrap').fadeToggle('slow');    
});

艾迪t

您可以嘗試將包裝div的背景設置爲1x1透明GIF/PNG，這應該擺脫黑色背景問題，並讓底層背景漸變顯示出來。

來源

2011-10-07 17:38:24

看我的編輯，讓我知道如果這對你有用。 –

jQuery淡入淡出在IE 8中的陰影？

回答

相關問題