gpt4 book ai didi

HTML5 不在 IE 中呈现 header 标签

转载 作者:搜寻专家 更新时间:2023-10-31 22:47:17 24 4
gpt4 key购买 nike

所以我正在使用一个名为 Bonsai 的静态站点生成器,它使用一些相互依赖性,例如 Handlebars 、倾斜和液体模板。现在遵循最佳实践,我正在 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 的支持,真的我不太关心旧的。现在 header 根本不呈现,在 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 语句。刷新页面时,它现在会在其上方显示标题 block

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

如果我使 if 语句查找 IE 而不是特定版本,它会呈现,如果我指定它不呈现的版本,如果我删除 if 语句并仅在头部调用 html5shiv.js 文件,它不会呈现.它只有在我打破 if 语句时才会呈现??抱歉,如果这是一个菜鸟问题,这是我第一次尝试 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;

}

但我看不出这会如何破坏 header 标签??

最佳答案

除了我上面的评论外,您不需要 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>

到文件的顶部就可以了。

如果没有指定文档类型,IE 总是求助于 Quirks 模式(这是你永远不需要的!)

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

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

关于HTML5 不在 IE 中呈现 header 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14891543/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com