帶有顯示的嵌套HTML元素：none在IE8中不行爲

我使用jQuery淡入包含<section>元素的<article>元素。帶有顯示的嵌套HTML元素：none在IE8中不行爲

外部元素是display:none,position:fixed和z-index:5。內部元素是position:absolute。

基本上文章給出了一個框架，內部部分包含內容並具有滾動條。

我正在淡入外界元素，期待內部跟進。

在IE9 +，FF和Chrome中，它按預期工作。

在IE8中它沒有。外部文章根本不會褪色 - 仍然不可見，內部部分相對於瀏覽器框架定位並始終可見。頁面上的其他元素都是傾斜的，並且頁面大部分都不起作用。

代碼示例：

article 
{ 
    display: none; 
    position: fixed; 
    z-index: 5; 
} 

section 
{ 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    bottom: 10px; 
    left: 10px; 
    overflow: auto; 
}

和

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    </head> 
    <body> 
    <article id="contentFrame"> 
     <section id="content"> 
     Lorem Ipsum 
     </section> 
    </article> 
    </body> 
</html>

和

$("#contentFrame").fadeIn(2000);

來源

2011-09-19 Ozzah

可以提供的jsfiddle？ – Headshota

http://jsfiddle.net/vXVQs/ – Ozzah

IE8及以下不支持HTML5標記，如article和section。

HTML5 elements CSS & Javascript interaction in IE8 and below

HTML5 elements in Internet Explorer: runtime insertion

來源

2011-09-19 05:45:32

我創建了一個新的jsFiddle，用div替換文章/部分標記。它現在效果更好，但內部div始終可見，無論外部div的當前不透明度如何。請參閱：http://jsfiddle.net/MBNsd/ – Ozzah

這是動畫在IE中的工作方式。 http://jsfiddle.net/E5wGq/3/ - 按預期工作。首先延遲添加僅爲了顯着。 –

好的，我可以做到這一點。但這是一個非常簡單的例子。在我的真實頁面中，我在#eSection中有幾十個層次中的無數嵌套元素。我需要fadeIn（）每個級別的每個元素，還是因爲#eSection是位置：絕對是讓IE做到這一點？我將不得不fadeIn（）所有位置：絕對的後代？ – Ozzah

帶有顯示的嵌套HTML元素：none在IE8中不行爲

回答

相關問題