IE 8 Автоматическое закрытие тега <header>

Фон

В настоящее время я работаю над окончательным QA отзывчивого веб-сайта, и у меня проблема с IE 8 и IE 7. Мой клиент занимается контрактами с правительством, поэтому их веб-сайт должен быть совместим с IE 8 и IE 7. я я использую Modernizr с встроенным html5shiv. Я загружаю Modernizr в нижний колонтитул темы WordPress, который был создан для этого проекта. Я не пропускаю doctype или какой-либо другой очевидный код.

Я использую следующие скрипты, все из которых загружаются в нижний колонтитул WordPress:

Ситуация

У меня проблема с 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="#" onclick="location.href='http://example.com'; return false;"><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="#" onclick="location.href='http://example.com'; return false;"><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 -->

Что я пробовал

  • Загрузка html5shiv с IE-условием в <head>
  • Загрузка Modernizr в <head>

Я рассмотрел эти вопросы/ответы Stackoverflow:

Любая помощь с этим очень ценится! На самом деле я действительно действительно действительно хотел закончить этот сайт за выходные. Я уже несколько часов стуча головой о стену над этой проблемой.

Update

Вот несколько изображений из браузера, чтобы вырезать эмуляцию. Я тестировал сайт практически с Windows 7 и WIndows XP (IE 8 и IE 7). http://www.browserstack.com/screenshots/0d7c1d6dd22927c20495e67f07afe8934957b4d1

Ответы

Ответ 1

Одна вещь, которую я заметил, это элемент <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.

Еще одна интересная статья: История HTML5 Shiv) Paul Irish, в котором говорится , что новые элементы не могут содержать детей и не подвержены влиянию CSS ", что может быть причиной того, что теги становятся закрытыми. Будьте заинтересованы, если кто-нибудь может уточнить, является ли это виновником.

Ответ 2

Исправлена ​​проблема, перемещая Modernizr, jQuery и response.js в <head> DOM. Спасибо за помощь!