IE 8 中带有阴影的 jQuery fadeIn 错误？

Question

我有一个图像，其后面有一个半透明的阴影，我将其用作 div 中的背景图像。我遇到一个问题，当我淡入或淡出 div 时，半透明阴影显示为黑色，直到淡入完成。当我在 FireFox 中执行此操作时，它工作正常，我只能使用 Internet Explorer 8 重现该错误。

您可以在此处查看它的实际效果:http://jsfiddle.net/pVQER/2/

有谁知道为什么会发生这种情况吗？任何人都可以建议解决方法或修复吗？

更新:

在我的现实世界示例中，这个 div 位于另一个具有渐变的背景图像之上，因此我认为设置背景颜色不起作用。

Answer 1

解决 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');              
});

编辑

您可以尝试将包装器 div 的背景设置为 1x1 透明 GIF/PNG，这应该可以消除黑色背景问题并让底层背景渐变显示出来。