的jQuery/CSS褪色的問題，在IE8（只）

Question

可能重複嵌套元素：
Disappearing images in IE8 jQuery Cycle

我衰落的一組嵌套的元素，進出，揭示頁面的背景圖像。 嵌套的div/article元素已被賦予alpha通道不透明度，並且在IE中被半透明png覆蓋。

在FF，Chrome，ie6（yes，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跟蹤：fade not working on inner divs in ie8

按本網頁上的評論我申請filter: inherit;給孩子的容器，這發揮了作用。現在內容（文本和圖像）淡入淡出，但背景（不透明或（半透明））不是。它在延遲期間仍然保持不變，然後卡入可見的不可見狀態。

任何人有任何想法如何進一步此解決方法？編輯：

在ie9中測試，它工作得很好。這個bug只與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的詛咒，但是如果你需要在一個觸發事件中改變en元素的透明度，你必須像這樣使用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) 
}