html5 新元素（页眉、导航、页脚、..）在 IE 中不起作用答案

【问题标题】：html5 new elements (header, nav, footer, ..) not working in IEhtml5 新元素（页眉、导航、页脚、..）在 IE 中不起作用
【发布时间】：2011-07-10 18:49:56
【问题描述】：

html5 新元素（页眉、导航、页脚、..）在 IE 中不起作用

【问题讨论】：

标签： html

【解决方案1】：

您需要使用HTML5 Shim。这是一个detailed explanation，说明为什么需要这样做。

要使用 HTML5 Shim，您只需在页面的 <head> 中添加以下所有 CSS 声明即可：

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

【讨论】：

IE 8及以下版本怎么样？？

【解决方案2】：

您需要包含 HTML5 shiv 脚本以允许在旧 IE 浏览器中设置 HTML5 元素的样式：http://code.google.com/p/html5shiv/

要使用，请在 CSS 上方的元素中包含以下脚本：

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

【讨论】：

垫片？湿婆？这是怎么回事？
@Michael Dillon - 从技术上讲，它是一个 shim，但在 John Resig (paulirish.com/2011/the-history-of-the-html5-shiv) 意外创造了这个词后，它被称为“html5 shiv”
感谢您的帮助，挽救了我的生命 :) 但是，原始 code.google 来源说“为了性能，先包含 CSS 然后再包含此脚本会更有意义”跨度>

【解决方案3】：

另一种选择是使用Modernizr，它包括 HTML5 Shiv，还提供 HTML5 特征检测。

IE Modernizr 中的 HTML 5 元素在 JavaScript 启用来自 HTML5（以及缩写）的各种元素用于 Internet Explorer 中的样式。请注意，这并不意味着突然让 IE 支持 Audio 或 Video 元素，这只是意味着您可以使用部分而不是 div 并在 CSS 中设置它们的样式。你会也可能希望将其中许多元素设置为 display:block;看以 HTML5 Boilerplate CSS 为例。从 Modernizr 1.5 开始，这脚本与流行的 html5shim/html5shiv 中使用的脚本相同图书馆。两者都在 IE6-8 中启用 HTML5 元素的可打印性，虽然如果你已经结束了，你可能想尝试一下性能冲击 100kb 的 CSS。

支持的浏览器我们支持 IE6+、Firefox 3.5+、Opera 9.6+、Safari 2+，铬。在移动端，我们支持 iOS 的移动 Safari、Android 的 WebKit 浏览器、Opera Mobile、Firefox Mobile，而我们还在做更多的测试我们相信我们支持黑莓6+。 ~http://modernizr.com/docs/#html5inie

至少以下标签：article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

【讨论】：

【解决方案4】：

使用下面给出的脚本...它会帮助你..

对于您希望 IE

document.createElement("文章"); （在脚本标签内）
document.createElement("footer"); （在脚本标签内）

谢谢

【讨论】：

【解决方案5】：

更新 - 较新版本的 IE 确实支持 HTML5 结构元素，但较新的 'main' 元素除外。使用包含“主”元素的 CSS 重置，例如 normalize 将解决此问题。或者您可以将以下 CSS 添加到您的项目中：

    main { display: block;}

【讨论】：

【解决方案6】：

使用 HTML5shiv.js 或在 HTML Conditional cmets 中编写 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>

// 现在这些元素将在 IE8 和更小的浏览器中支持。

或访问此页面 https://tutorial.techaltum.com/html4-vs-html5.html

【讨论】：

【解决方案7】：

如果您不关心代码开销，只需使用内部 DIV 进行样式设置。

此部分不能通过带有 IE

<section class="section outer">
    <h1>Level1</h1>
    some text
    <section class="section inner">
        <h1>Level2</h1>
        some more text
    </section>
</section>

那是因为 IE

 <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>

但是，如果您不喜欢使用 javascript shim，您可以将 DIV 用作 IE

<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>

因此，您拥有用于 SEO 的现代 HTML5 标签，并且所有样式都由每个浏览器的 DIV 像往常一样完成。它是完全有效的 HTML5，并且在禁用 javascript 时仍然有效。

【讨论】：