ie8中嵌套元素的jQuery / css淡入淡出问题（仅限）[重复]

Question

可能重复：
Disappearing images in IE8 jQuery Cycle

我正在淡入和淡出一组嵌套元素，以显示页面的背景图像。 嵌套的 div/article 元素已被赋予 alpha 通道不透明度，并且在 IE 中被半透明 png 覆盖。

在 FF、Chrome、ie6（是的，ie6 ！！！）、ie7 和 ie9 中淡入和淡出工作正常，但遗憾的是在 ie8 中不行。

HTML：

<div id="wrapper">
   <div id="limiter">
      <div id="mainContent" class="cornerRadius10 alpha40Black">
         <header class="cornerRadius6 alpha50Black">
            <h1>Title Here</h1>
         </header>
         <article class="contentArticle cornerRadius6 alpha50Black">
            Content here.
         </article>
         <article class="contentArticle cornerRadius6 alpha50Black">
            More content here.
         </article>
      </div>
   </div>
</div>

css:

.alpha40Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-40.png");
    /* RGBa with 0.4 opacity */ 
    background: rgba(0, 0, 0, 0.4)
}
.alpha50Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-50.png");
    /* RGBa with 0.5 opacity */ 
    background: rgba(0, 0, 0, 0.5)
}

jQuery:

 $('#wrapper').children().animate({
    opacity: 0
 }, 2000 );

 setTimeout(function() {
    $('#wrapper').css('visibility' , 'hidden');
 }, 2000);

我也试过这个 jQuery：

    $('#limiter').children().fadeOut( 2000 );

以上任何组合都适用于除 ie8 之外的所有浏览器。当您尝试将淡出或淡入功能应用于包装父元素时，所发生的只是有一个暂停（淡出动画设置的时间长度），然后您想要淡出的元素立即消失，没有淡化效果。

我已经为此工作了几天，并用尽了 Google 的解决方案和可能的修复/变通办法，甚至没有什么能接近。

有人有什么想法吗？

问候，马特。

编辑：

我在调试这个问题方面取得了一些进展。

我删除了对半透明背景的所有引用，并尝试应用 jQuery 淡入淡出动画来检查背景是否没有掩盖真正的问题。

有趣的是，即使没有应用半透明背景（也测试了完全不透明的背景），淡入淡出动画仍然不起作用。完全一样的症状。 所以我快速搜索并在 jQuery Bug Tracker 上找到了这个：fade not working on inner divs in ie8

根据此页面上的 cmets，我将 filter: inherit; 应用于子容器，这产生了影响。现在内容（文本和图像）淡入淡出，但背景（不透明或（半）透明）不是。它在延迟期间仍然保持不变，然后突然变为不可见。

有人对如何进一步解决此问题有任何想法吗？

编辑：

在 ie9 中测试，它工作得很好。此错误仅与 ie8 相关。

谢谢，马特。

Answer 1

在你的 CSS 上试试这个：

.alpha40Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-40.png");
    /* RGBa with 0.5 opacity */ 
    background: rgba(0, 0, 0, 0.4);
    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=40);
}
.alpha50Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-50.png");
    /* RGBa with 0.5 opacity */ 
    background: rgba(0, 0, 0, 0.5);
    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=50);
}

如果您对其他浏览器没有其他问题，这应该可以工作...诅咒您必须相应地更新 jquery

编辑：

jQuery:
$('#wrapper').children().animate({
    opacity: 0.4,
    filter: 'alpha(opacity=40)'
 }, 2000 );

这是一个示例 jquery，它从不透明度到 0.4 进行动画处理。如果您希望在页面加载后具有标准不透明度，则不需要诅咒 jquery，但如果您需要在一个触发事件上更改元素不透明度，则必须使用这样的 jquery。

编辑：

如果您的问题是正确的，我会在 jsFiddle 中提出解决方案。我无法在旧版 ie 中测试它。我希望这有效:)

Answer 2

我不确定这是否是您的问题，但我认为您设置的背景错误：

.alpha40Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-40.png");
    /* RGBa with 0.4 opacity */ 
    background: rgba(0, 0, 0, 0.4)
}

background 是一个快捷方式属性，用于同时设置多个值。如果你在做的时候遗漏了子值，那么它会重置其他值。您应该改用单独的背景属性：

.alpha40Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background-color: rgb(0, 0, 0);
    background-image: url("../images/blk-40.png");
    /* RGBa with 0.4 opacity */ 
    background-color: rgba(0, 0, 0, 0.4)
}