IE 8 schließt automatisch Schild

Question 1

Hintergrund

Ich arbeite derzeit an der abschließenden Qualitätssicherung von a ansprechbar Website und ich habe ein Problem mit IE 8 und IE 7. Mein Kunde befasst sich mit der Auftragsvergabe von Behörden, daher muss seine Website mit IE 8 und IE 7 kompatibel sein. Ich verwende Modernizr mit integriertem html5shiv. Ich lade Modernizr in die Fusszeile eines WordPress-Themes, das speziell für dieses Projekt erstellt wurde. Mir fehlt kein Doctype oder irgendein anderer offensichtlicher Code.

Ich verwende die folgenden Skripte, die alle in der Fußzeile von WordPress geladen werden:

jQuery 1.10.1
Modernizr 2.6.3 (klicken für Konfiguration)
antworten.js 1.3.0

Superfisch
jQuery-Wegpunkte 2.0.3
jQuery Wegpunkte Sticky 2.0.3

Die Situation

Ich habe ein Problem mit dem automatischen Schließen von a <header> Schild. Zuerst habe ich zwei Dienstprogramme verwendet, um dieses Problem zu überprüfen:

IETester
IE 11 emuliert zu IE 8 mit IE 8 User Agent

Hier ist der korrekte Ausgabe

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

Was IE 8 rendert:

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

Was ich versucht habe

Laden von html5shiv mit IE-Bedingung in der <head>

Laden von Modernizr in der <head>

Ich habe mir diese Stackoverflow-Fragen/Antworten angesehen:

html 5 tags foorter oder header in dh 8 und dh 7

html5 rendert keine Header-Tags in ie
IE 8 selbstschließende Tags automatisch

Jede Unterstützung dabei wird sehr geschätzt! Ich würde wirklich Ja wirklich Ja wirklich möchte diese Website am Wochenende fertigstellen. Ich habe in den letzten Stunden wegen dieses Problems meinen Kopf gegen die Wand geschlagen.

Aktualisieren

Hier sind einige Bilder von Browsershack, um die Emulation auszuschneiden. Ich habe die Seite virtuell mit Windows 7 und Windows XP (IE 8 & IE 7) getestet. http://www.browserstack.com/screenshots/0d7c1d6dd22927c20495e67f07afe8934957b4d1

Question 2

Das Problem wurde behoben, indem Modernizr, jQuery und respond.js in die verschoben wurden <head> des DOM. Danke für all die Hilfe!

Question 3

Eine Sache, die mir aufgefallen ist, ist die <nav> -Element, das in IE8 nicht unterstützt wird. Daher ist es sinnvoll, dass Sie Shims und dergleichen im Header verschieben müssen.

Dachte, das könnte eine gute Information sein, warum.

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.

Ein weiterer interessanter Artikel (Geschichte des HTML5 Shiv) von Paul Irish, in dem es heißt “Die neuen Elemente können keine Kinder enthalten und werden von CSS nicht beeinflusst”, was der Grund dafür sein könnte, dass Tags sich selbst schließen. Interessieren Sie sich, wenn jemand näher darauf eingehen kann, ob dies der Übeltäter ist.