Html html5 新元素（页眉、导航、页脚等）在 IE 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5227331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html5 new elements (header, nav, footer, ..) not working in IE
提问by dragonfly
html5 new elements (header, nav, footer, ..) not working in IE
html5 新元素（页眉、导航、页脚等）在 IE 中不起作用
回答by mVChr
You need to include the HTML5 shiv script in order to allow styling of HTML5 elements in older IE browsers: http://code.google.com/p/html5shiv/
您需要包含 HTML5 shiv 脚本，以允许在较旧的 IE 浏览器中设置 HTML5 元素的样式：http: //code.google.com/p/html5shiv/
To use, include the following script in your element above your CSS:
要使用，请在 CSS 上方的元素中包含以下脚本：
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
回答by Andrew Marshall
You need to use HTML5 Shim. Here is a detailed explanationas to why this is needed.
您需要使用HTML5 Shim。这里详细解释了为什么需要这样做。
To use HTML5 Shim, you just need to add the following within your page's <head>above all your CSS declarations:
要使用 HTML5 Shim，您只需在页面的<head>所有 CSS 声明上方添加以下内容：
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
回答by mpdonadio
Another option is to use Modernizr, which includes the HTML5 Shiv and also provides HTML5 feature detection.
另一种选择是使用Modernizr，它包括 HTML5 Shiv 并提供 HTML5 功能检测。
HTML 5 elements in IE Modernizr runs through a little loop in JavaScript to enable the various elements from HTML5 (as well as abbr) for styling in Internet Explorer. Note that this does not mean it suddenly makes IE support the Audio or Video element, it just means that you can use section instead of div and style them in CSS. you'll also probably want to set many of these elements to display:block; see the HTML5 Boilerplate CSS for an example. As of Modernizr 1.5, this script is identical to what is used in the popular html5shim/html5shiv library. Both also enable printability of HTML5 elements in IE6-8, though you might want to try out the performance hit if you have over 100kb of css.
Supported browsers We support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. On mobile, we support iOS's mobile Safari, Android's WebKit browser, Opera Mobile, Firefox Mobile and whilst we're still doing more testing we believe we support Blackberry 6+. ~ http://modernizr.com/docs/#html5inie
IE Modernizr 中的 HTML 5 元素在 JavaScript 中运行一个小循环，以启用 HTML5（以及 abbr）中的各种元素在 Internet Explorer 中进行样式设置。请注意，这并不意味着它突然让 IE 支持 Audio 或 Video 元素，这只是意味着您可以使用 section 而不是 div 并在 CSS 中设置它们的样式。您可能还想将这些元素中的许多设置为 display:block; 有关示例，请参阅 HTML5 样板 CSS。从 Modernizr 1.5 开始，此脚本与流行的 html5shim/html5shiv 库中使用的脚本相同。两者都还支持 IE6-8 中 HTML5 元素的可打印性，但如果您的 css 超过 100kb，您可能想尝试一下性能损失。
支持的浏览器我们支持 IE6+、Firefox 3.5+、Opera 9.6+、Safari 2+、Chrome。在移动设备上，我们支持 iOS 的移动 Safari、Android 的 WebKit 浏览器、Opera Mobile、Firefox Mobile，虽然我们仍在进行更多测试，但我们相信我们支持 Blackberry 6+。~ http://modernizr.com/docs/#html5inie
The following tags at least: article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
至少有以下标签： article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
回答by Avinash Malhotra
Use HTML5shiv.js or write javascript code in HTML Conditional comments.
使用 HTML5shiv.js 或在 HTML 条件注释中编写 javascript 代码。
<!--this condition is only for IE 8 and lesser browsers.-->
<!--[if lte IE 8]> // lte means LESS THAN & EQUAL TO IE8.
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('footer');
</script>
<style>
header, nav, article, section, aside, footer{ display:block; }
</style>
// Now these elements will support in IE8 and lesser browsers.
// 现在这些元素将在 IE8 和更低版本的浏览器中支持。
Or visit this page https://tutorial.techaltum.com/html4-vs-html5.html
回答by SammieFox
If you don't care about a little bit code-overhead just use inner DIVs for styling.
如果您不关心一点代码开销，只需使用内部 DIV 进行样式设置。
This sections can not be styled via CSS with IE<9 (no HTML5-support). Even if you put a class-attribute inside the section-tag.
这部分不能通过 IE<9 的 CSS 设置样式（不支持 HTML5）。即使您将 class-attribute 放在 section-tag 中。
<section class="section outer">
<h1>Level1</h1>
some text
<section class="section inner">
<h1>Level2</h1>
some more text
</section>
</section>
Thats because IE<9 is killing the nesting for unknown tags. The DOM looks crazy like this:
那是因为 IE<9 正在杀死未知标签的嵌套。DOM 看起来像这样：
<section class="section outer"></section>
<h1>Level1</h1>
some text
<section class="section inner"></section>
<h1>Level2</h1>
some more text
</section><//section>
</section><//section>
But you can use DIVs as an IE<9-Fallback, if you don't like to use javascript shim's. Instead of styling the SECTIONs, just style the inner DIVs.
但是，如果您不喜欢使用 javascript shim，您可以将 DIV 用作 IE<9-Fallback。无需为 SECTION 设置样式，只需设置内部 DIV 的样式即可。
<section>
<div class="section outer">
<h1>Level1</h1>
some text
<section>
<div class="section inner">
<h1>Level2</h1>
some more text
</div>
</section>
</div>
</section>
So you have modern surrounding HTML5-tags for SEO and all the styling is done by the DIVs for every browser as usual. It's full valid HTML5 and still works if javascript is disabled.
所以你有现代的围绕 SEO 的 HTML5 标签，所有的样式都是由每个浏览器的 DIV 像往常一样完成的。它是完全有效的 HTML5，如果 javascript 被禁用，它仍然有效。
回答by jbs
Update - newer versions of IE do support HTML5 structural elements with the exception of the newer 'main' element. Using a CSS reset that includes the 'main' element such as normalizewill fix this. Or you can just add the following CSS to your project:
更新 - 较新版本的 IE 确实支持 HTML5 结构元素，但较新的“main”元素除外。使用包含“main”元素（例如normalize）的 CSS 重置将解决此问题。或者您可以将以下 CSS 添加到您的项目中：
main { display: block;}
回答by Neethu
Use the script given below...it will help you..
For each new element you want IE < 9 to recognise..add as below:
使用下面给出的脚本......它会帮助你......
对于你希望 IE < 9 识别的每个新元素......添加如下：
document.createElement("article"); (within script tag)
document.createElement("footer"); (within script tag)
document.createElement("文章"); （在脚本标签内）
document.createElement("footer"); （在脚本标签内）
Thank you
谢谢
