HTML5不在IE中呈现标题标签 [英] HTML5 not rendering header tags in IE

问题描述

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

So i am using a static site generator called Bonsai that uses a few codependencies like handlebars, tilt and liquid templating. now following best practices i am building it on HTML5. i have tested the format extensively on chrome and firefox and opera. saving the worst for last IE.

在那些打算提供明显解决方案的人之前，我已经在头部包含了html5shiv并且我已经设置了css：

first before those who are going to give the obvious solutions, i have included html5shiv in the head and i have set in 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文件并将其链接在头部并按如下方式调用：

i would like to have IE 8 and 9 support really i dont care much for the older ones. now the header does not render at all, when looking at the console in IE9 i can see that there is nothing even being put through. i thought that it was becasue it was trying to pull the shiv file from an online source so i downloaded the html5shiv.js file and linked it in the head and called it as follows:

  <!--[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语句。当刷新页面时，它现在显示上面的标题栏

and nothing still so just as a test i broke the if statement by removing the 9 in the above link. when refreshing the page it now displays the header block with this above it

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

如果我使if语句查找IE而不是特定版本它会呈现并且如果我指定它没有渲染的版本，如果我删除if语句，只是调用头部中的html5shiv.js文件，它不会渲染。如果我打破if语句，它只会被渲染？对不起，如果这是一个noobish问题，这是我第一次尝试HTML5，我错过了什么？

if i make the if statement look for IE and not a specific version it dosent render and if i specify the version it doesnt render, if i remove the if statement and just call the html5shiv.js file in the head it doesnt render. its only rendered if i break the if statement?? sorry if this is a noobish question this is my first attempt at HTML5 what am i missing??

编辑：

所以是的，你可以去看看它的这里。抱歉Ian我stackoverflow评论呈现http：//所以它就在那里它只是没有在评论中显示它。

so yeah you can go see the site its here. sorry Ian i stackoverflow comments renders the http:// so it is there it just didnt show it in the comment.

我试过了

 <!--[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都非常紧张..在它符合之前它就是它的样子

none are working.. and all my HTML is pretty strait up.. well before it complies this is what it looks like

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

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

the nav that i am referencing to in the above looks like this

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

and then the only CSS that i run on the #navigation tag is

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

}

但我怎么看不会破坏标头标签？ ？

but i cant see how that would break the header tag??

推荐答案

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

In addition to my comment above, you don't need the html5shiv for IE9, which I'm sure you know.

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

Chances are there are some HTML problems elsewhere as IE doesn't try and fix things for you the way other browsers do.

<！ - [if lt IE]>的原因<！[endif] - > 不起作用是你需要删除它以便它只是读取<！ - [if IE]> ; <！[endif] - >

The reason that <!--[if lt IE ]> <![endif]--> doesn't work is that you need to remove the lt so that it simply reads <!--[if IE]> <![endif]-->

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

Based on your reply above regarding the JS file, I'd try:

<!--[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：// 。

is wrong. You need to have the http:// in front of the html5shiv.

有关网站的链接是理想的。

A link to the website in question would be ideal.

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

UPDATE I see what's wrong now, you're missing a doctype! Add:

<!doctype html>

到文件顶部，没关系。

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

If no doctype is specified, IE always resorts to Quirks mode (which you never want!)

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

You also have multiple <head> elements which is wrong. And everything needs to be enclosed in a <html> element.

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

Actually there's a lot wrong with the markup, you don't even have a <body> element!

这篇关于HTML5不在IE中呈现标题标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！