13

背景

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

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

情况

我遇到了 IE 8 自动关闭<header>标签的问题。首先，我使用了两个实用程序来检查这个问题：

  1. IETest
  2. IE 11 模拟到带有 IE 8 用户代理的 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 -->

我试过的

  • 在 IE 条件下加载 html5shiv<head>
  • 在<head>

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

非常感谢您对此的任何帮助！我真的真的 很想在周末完成这个网站。在过去的几个小时里，我一直在为这个问题撞墙。

更新

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

4

2 回答 2

3

通过将 Modernizr、jQuery 和 respond.js 移动到<head>DOM 来修复问题。感谢所有的帮助！

于 2013-11-09T16:12:15.510 回答
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.

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

于 2013-11-13T03:52:17.153 回答