Фон
В настоящее время я работаю над окончательным QA отзывчивого веб-сайта, и у меня проблема с IE 8 и IE 7. Мой клиент занимается контрактами с правительством, поэтому их веб-сайт должен быть совместим с IE 8 и IE 7. я я использую Modernizr с встроенным html5shiv. Я загружаю Modernizr в нижний колонтитул темы WordPress, который был создан для этого проекта. Я не пропускаю doctype или какой-либо другой очевидный код.
Я использую следующие скрипты, все из которых загружаются в нижний колонтитул WordPress:
- jQuery 1.10.1
- Modernizr 2.6.3 (щелкните для конфигурации)
- response.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="#" 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:
- html 5 тегов foorter или header в ie 8 и ie 7
- html5 не обрабатывает теги заголовков, т.е.
- Автоматически закрывающие теги IE 8
Любая помощь с этим очень ценится! На самом деле я действительно действительно действительно хотел закончить этот сайт за выходные. Я уже несколько часов стуча головой о стену над этой проблемой.
Update
Вот несколько изображений из браузера, чтобы вырезать эмуляцию. Я тестировал сайт практически с Windows 7 и WIndows XP (IE 8 и IE 7). http://www.browserstack.com/screenshots/0d7c1d6dd22927c20495e67f07afe8934957b4d1
