我正在使用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元素:运行时插入