HTML5 不在 IE 中呈现标题标签答案

【问题标题】：HTML5 not rendering header tags in IEHTML5 不在 IE 中呈现标题标签
【发布时间】：2013-02-15 09:25:28
【问题描述】：

所以我使用了一个名为 Bonsai 的静态站点生成器，它使用了一些相互依赖关系，例如把手、倾斜和液体模板。现在遵循最佳实践，我正在 HTML5 上构建它。我已经在 chrome、firefox 和 opera 上广泛测试了该格式。为最后一个 IE 保存最坏的情况。

首先在那些要给出明显解决方案的人之前，我已经在头部包含了 html5shiv，并且我已经在 css 中设置了：

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

我希望有 IE 8 和 9 支持真的我不太关心旧的。现在标题根本不呈现，当在 IE9 中查看控制台时，我可以看到甚至没有任何东西被通过。我认为这是因为它试图从在线资源中提取 shiv 文件，所以我下载了 html5shiv.js 文件并将其链接到头部并按如下方式调用它：

  <!--[if lte IE 9]>
    <script src="/js/html5shiv.js"></script>
  <![endif]-->

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

什么也没有，只是作为一个测试，我通过删除上面链接中的 9 来打破 if 语句。刷新页面时，它现在会在其上方显示标题块

<!--[if lt IE ]> <![endif]-->

如果我让 if 语句查找 IE 而不是它不渲染的特定版本，如果我指定它不渲染的版本，如果我删除 if 语句并只在头部调用 html5shiv.js 文件，它不会渲染.只有当我打破 if 语句时才会呈现它？抱歉，如果这是一个愚蠢的问题，这是我第一次尝试 HTML5，我错过了什么？？

编辑：

所以是的，你可以去看看它的网站here。对不起，伊恩，我 stackoverflow cmets 渲染了 http:// 所以它就在那里，只是没有在评论中显示。

我试过了

 <!--[if IE ]> <![endif]-->  //all versions of IE
 <!--[if lt IE 9]> <![endif]-->  //all versions of IE before 9
 <!--[if lte IE 9 ]> <![endif]--> // version 9 of IE

没有一个工作..我所有的 HTML 都非常严格.. 在它遵守之前，这就是它的样子

<header>
  {% include "shared/nav" %}
</header>

我在上面引用的导航看起来像这样

<nav id="navigation">
  <div id="nav_div_home" class="nav_buttons"><a id="nav_home" class="left_nav" href="/">Home</a></div>
  <div id="nav_div_system" class="nav_buttons"><a id="nav_system" class="left_nav" href="/systems/">Systems</a></div>
  <div id="nav_div_studies" class="nav_buttons"><a id="nav_studies" class="left_nav" href="/studies/">Studies</a></div>
  <img id="nav_logo" src="/images/logo3.png" alt="Mpowered logo">
  <div id="nav_div_approach" class="nav_buttons"><a id="nav_approach" class="right_nav" href="/approach/">Approach</a></div>
  <div id="nav_div_about" class="nav_buttons"><a id="nav_about" class="right_nav" href="/about/">About</a></div>
  <div id="nav_div_contact" class="nav_buttons"><a id="nav_contact" class="right_nav" href="/contact/">Contact</a></div>
</nav>

然后我在#navigation 标签上运行的唯一 CSS 是

#navigation {
 height: 150px;
 padding-top: 60px;
 margin: 0px auto;
 width: 960px;

}

但我看不出这会如何破坏标题标签？？

【问题讨论】：

您确定 html5shiv.js 文件的链接正确吗？我怀疑不是。
我同时运行这两个
你在哪个 IE 版本上测试这个？
我正在我的 VM 上的 IE 9 上对此进行测试。我已将其设置为查看运行 ubuntu 12.10 的机器上的本地主机

标签： html internet-explorer html5shiv

【解决方案1】：

除了我上面的评论，你不需要 IE9 的 html5shiv，我相信你知道。

其他地方可能存在一些 HTML 问题，因为 IE 不会像其他浏览器那样尝试为您解决问题。

 不起作用的原因是您需要删除 lt 以便它简单地读取 

根据您上面关于 JS 文件的回复，我会尝试：

<!--[if lte IE 9]><script src="js/html5shiv.js"></script> <![endif]-->

和

<!--[if IE]><script src="html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

错了。您需要在html5shiv 前面加上http://。

一个指向相关网站的链接是理想的。

更新我现在知道出了什么问题，您缺少文档类型！添加：

<!doctype html>

到文件顶部就可以了。

如果没有指定文档类型，IE 总是使用 Quirks 模式（这是你永远不想要的！）

您还有多个错误的<head> 元素。并且所有内容都需要包含在 <html> 元素中。

其实标记有很多问题，你连<body>元素都没有！

【讨论】：

嘿，我用你所要求的所有内容更新了我的问题，你的回答很好，只是我仍然超级卡住，我在发布我认为的问题之前在线阅读了你的所有建议宇宙只是讨厌我:)
更新了我的答案，见上文！
伙计正在使用发电机，我认为它会即时构建它..我整个早上都在使用这个！！这是freeken doctype！哈哈哈哈哈哈！！！你的传奇！你至少需要 1000 分

【解决方案2】：

事实上，简单地创建元素而不将其添加到 DOM 将允许 IE（甚至 6）识别它。所以

<script type="text/javascript">
   document.createElement("'header'");
   document.createElement("'nav'");
   document.createElement("'article'");
   document.createElement("'section'");
   document.createElement("'footer'");
 </script>

将解决您的问题。你可以把它减少到

'article aside footer header nav section time'.replace(/\w+/g,function(n){document.createElement(n)})

在这里找到：http://www.hagenburger.net/BLOG/Simple-HTML5-Fix-for-IE.html

【讨论】：

首先：在您的第一个 sn-p 中，双“引用”元素名称有什么意义？第二：需要注意的是脚本必须在任何要渲染的html5元素插入到DOM之前执行