Question

所以我使用一个名为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语句，它只会被渲染？对不起，如果这是一个noobish问题，这是我第一次尝试HTML5，我错过了什么？

编辑：

所以是的，你可以去看它的网站here。抱歉Ian我stackoverflow评论呈现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;

}

但我不知道这会如何破坏标题标记？

Answer 1

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

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

不起作用的原因是你需要删除它，以便它只读取

根据你上面关于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]-->

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

有关网站的链接非常理想。

<强>更新我现在看到了什么错，你错过了一个doctype！添加：

<!doctype html>

到文件的顶部，没关系。

如果没有指定doctype，IE总是采用Quirks模式（你永远不会想要！）

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

实际上标记有很多错误，你甚至没有<body>元素！

Answer 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

HTML5不在IE中呈现标题标签

2 个答案: