3

所以我使用了一个名为 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，我错过了什么？

编辑：

所以是的，你可以去看看它的网站。对不起，伊恩我 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;

}

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

4

2 回答 2

4

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

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

<!--[if lt IE ]> <![endif]-->不起作用的原因是您需要删除 lt 以便它简单地读取<!--[if IE]> <![endif]-->

根据您上面关于 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 html>

到文件的顶部，它会没事的。

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

您还有多个<head>错误的元素。一切都需要包含在一个<html>元素中。

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

于 2013-02-15T09:39:04.190 回答
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

于 2013-05-22T08:39:02.000 回答