Question

html5新元素（标题，导航，页脚，...）在IE中不起作用

Answer 1

您需要包含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]-->

Answer 2

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

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

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

Answer 3

另一种选择是使用Modernizr，其中包括HTML5 Shiv，还提供HTML5功能检测。

IE Modernizr中的HTML 5元素在一个小循环中运行   用于启用HTML5中各种元素的JavaScript（以及abbr）   在Internet Explorer中进行样式设置。请注意，这并不意味着它   突然让IE支持音频或视频元素，它只是意味着   您可以使用section而不是div并在CSS中设置它们的样式。你会   也可能想要设置许多这些元素来显示：块;看到   以HTML5 Boilerplate CSS为例。截至Modernizr 1.5，这个   脚本与流行的html5shim / html5shiv中使用的脚本相同   图书馆。两者都可以在IE6-8中实现HTML5元素的可打印性，   虽然如果你结束了，你可能想尝试一下性能   100kb的css。

支持的浏览器我们支持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

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

Answer 4

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

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

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

Answer 5

如果你不关心一点代码开销，只需使用内部DIV进行样式化。

此部分无法通过CSS使用IE＆lt; 9（无HTML5支持）进行样式设置。即使你在section-tag中加入了class-attribute。

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

多数民众赞成因为IE＆lt; 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>

但如果您不想使用javascript shim，则可以将DIV用作IE＆lt; 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>

因此，您拥有适用于SEO的现代周边HTML5标签，并且所有样式都由DIV为每个浏览器照常完成。它是完整有效的HTML5，如果禁用了javascript，它仍然有效。

Answer 6

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

对于每个新元素，您希望IE＆lt; 9识别......如下：

使用document.createElement（＆＃34;物品＆＃34）; （在脚本标记内）
document.createElement（＆＃34; footer＆＃34;）; （在脚本标记内）

谢谢

Answer 7

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

    main { display: block;}

html5新元素（header，nav，footer，..）在IE中不起作用

7 个答案: