IE 8自动关闭<header>标记

Question

IE 8自动关闭<header>标记

djt*_*oms 13 html javascript wordpress jquery internet-explorer

背景

我目前正致力于响应式网站的最终质量保证,我遇到了IE 8和IE 7的问题.我的客户处理政府合同,因此他们的网站需要与IE 8和IE 7兼容.我使用的是Modernizr内置html5shiv.我在为该项目定制的WordPress主题的页脚中加载Modernizr .我没有错过doctype或任何其他明显的代码.

我使用以下脚本,所有这些脚本都加载到WordPress的页脚中:

jQuery 1.10.1
Modernizr 2.6.3(点击查看配置)
respond.js 1.3.0
快鱼
jQuery Waypoints 2.0.3
jQuery Waypoints Sticky 2.0.3

情况

我遇到IE 8自动关闭<header>标签的问题.首先,我使用了两个实用程序来检查此问题:

IETester
IE 11模拟到IE 8 w/IE 8用户代理

这是正确的输出

<div class="wrapper main-header">
    <header class="container">
        <div class="sixteen columns alpha omega">
            <div class="eight columns alpha omega logo"> <a href="http://example.com"><img src="http://example.com/wp-content/uploads/2013/10/logo.png" alt="Example"></a> </div>
            <div class="wrapper main-navigation desktop">
                <nav id="nav" class="six columns alpha omega">
                    ...
                </nav>
                <div class="eight columns alpha omega overlay" style="display: none;">
                    ...
                </div>
                <div class="two columns alpha omega menu-ss">
                    ...
                </div>
            </div><!-- .wrapper.main-navigation --> 
        </div><!-- /.sixteen.columns --> 
    </header><!--/header-->
</div><!-- /.main-header -->

Run Code Online (Sandbox Code Playgroud)

IE 8渲染的内容:

<div class="wrapper main-header">
    <header class="container"></header>
        <div class="sixteen columns alpha omega">
            <div class="eight columns alpha omega logo"> <a href="http://example.com"><img src="http://example.com/wp-content/uploads/2013/10/logo.png" alt="Example"></a> </div>
            <div class="wrapper main-navigation desktop">
                <nav id="nav" class="six columns alpha omega">
                    ...
                </nav>
                <div class="eight columns alpha omega overlay" style="display: none;">
                    ...
                </div>
                <div class="two columns alpha omega menu-ss">
                    ...
                </div>
            </div><!-- .wrapper.main-navigation --> 
        </div><!-- /.sixteen.columns --> 
    </header><//header><!--/header-->
</div><!-- /.main-header -->

Run Code Online (Sandbox Code Playgroud)

我试过了什么

在IE中加载带有IE条件的html5shiv <head>
装载Modernizr <head>

我看过这些Stackoverflow问题/答案:

非常感谢您对此的任何帮助!我真的非常想在周末完成这个网站.在这个问题上,过去几个小时我一直在撞墙.

更新

以下是来自browsershack的一些图像,用于删除仿真.我使用Windows 7和WIndows XP(IE 8和IE 7)虚拟测试了该站点.http://www.browserstack.com/screenshots/0d7c1d6dd22927c20495e67f07afe8934957b4d1

Answer 1

afr*_*and 2

我注意到的一件事是该<nav>元素，IE8 不支持该元素。因此，您必须在标头中移动任何垫片等，这是有道理的。

我认为这可能是说明原因的好信息。

万维网联盟

The <nav> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 8 and earlier versions, do not support the <nav> tag.

Run Code Online (Sandbox Code Playgroud)

另一篇有趣的文章（HTML5 Shiv 的故事）由 Paul Irish 撰写，其中指出“新元素无法容纳子元素并且不受 CSS 影响”，这可能就是标签自动关闭的原因。如果有人能详细说明这是否是罪魁祸首，请感兴趣。

归档时间：	12 年，2 月前
查看次数：	2468 次
最近记录：	12 年，2 月前