带有display的嵌套HTML元素:none在IE8中不起作用

Nested HTML elements with display:none not behaving in IE8

本文关键字：none IE8 不起作用 元素 display 嵌套 HTML 带有      更新时间：2023-09-26

我正在使用jQuery淡入包含<section>元素的<article>元素。

外部元素是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);

IE8及以下版本不支持article和section等HTML5标记。

HTML5元素CSS&IE8及以下中的Javascript交互

InternetExplorer中的HTML5元素：运行时插入

相关文章：