Question

背景

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

我正在使用以下脚本，所有脚本都加载到WordPress的页脚中：

jQuery 1.10.1
Modernizr 2.6.3 (click for config)
respond.js 1.3.0
SUPERFISH
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 -->

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

我尝试过什么

在<head>
在<head>

我查看了这些Stackoverflow问题/答案：

对此非常感谢！我真的真的真的喜欢在周末完成这个网站。在这个问题上，过去几个小时我一直在撞墙。

更新

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

Answer 1

通过将Modernizr，jQuery和respond.js移动到DOM的<head>来解决此问题。感谢您的帮助！

Answer 2

我注意到的一件事是<nav>元素，它在IE8中不受支持。所以你必须在标题中移动任何垫片等。

认为这可能是关于原因的好信息。

W3C

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.

保罗爱尔兰的另一篇感兴趣的文章（Story of the HTML5 Shiv）指出“新元素不能容纳孩子并且不受CSS影响”，这可能就是标签变为自我关闭的原因。如果有人能详细说明这是否是罪魁祸首，那就有兴趣了。

IE 8自动关闭<header>标记</header>

背景

情况

我尝试过什么

更新

2 个答案: