Bootstrap in IE8 Wie macht man Styling?

Question

Ich fand heraus, dass ich Respond.js verwenden muss, wenn ich Bootstrap in IE8 arbeiten möchte. Einmal eingeschlossen, sieht alles gut aus, bis auf eine Sache. Es sieht so aus, als würde sich HTML5-Elementstil nicht anpassen (selbst wenn ich mit Inline-Code arbeite, wenn ich Entwicklerwerkzeug in IE11 (mit Emulation auf IE8) in meiner lokalen HTML-Datei verwende, aber wenn ich dasselbe auf einer Bootstrap example mache, scheint es zu funktionieren vollkommen in Ordnung, obwohl).

Ändern der HTML-Code aus:

<footer>...</footer> 

Um

<footer style="BACKGROUND-COLOR: tomato">...</footer> 

Werke im Beispielseite (während im Browser bearbeiten), aber funktioniert nicht, wenn ich meine lokale Datei öffnen und tun das gleiche Sache.

Warum kann ich eine Fußzeile auf den HTML5-Elementen innerhalb der the example Seite hinzufügen, aber nicht in meiner lokalen Datei? Fehle ich eine Datei oder muss ich etwas anders machen? Wie kann ich meine <footer> Styling arbeiten lassen?

Ein Vorschlag, den ich tun würde, ist es nur ein <div> Element mit einer Klasse machen .footer aber das ist nicht die Art und Weise es wie im Bootstrap Beispiel sieht, so dass ich weiß nicht, ob dies der richtige Weg ist es, das Problem, das mich zu beheben bin erleben.

Answer 1

HTML5 hat eine ganze Reihe neuer Elemente, um Ihren Seiten semantische Bedeutung hinzuzufügen. Zum Beispiel bedeutet nav ein Navigationsmenü.

Da IE8 nichts darüber weiß, erkennt es Stile nicht, die über CSS auf sie angewendet werden. Glücklicherweise gibt es eine einfache Möglichkeit, dieses Problem zu beheben, indem Sie einfach fehlende Elemente auf das DOM der Seite angehängt:

<!--[if lt IE 9]> 
    <script> 
     document.createElement('header'); 
     document.createElement('nav'); 
     document.createElement('section'); 
     document.createElement('article'); 
     document.createElement('aside'); 
     document.createElement('footer'); 
    </script> 
<![endif]--> 

Offensichtlich Sie nicht jedes HTML5-Element in Existenz definieren müssen, nur die, die Sie tatsächlich nutzen. Dieser Code verwendet übrigens conditional comment s, eine Funktion, die von Microsoft eingeführt wurde, um Unterschiede in den Browserversionen zu unterstützen.

Eine weitere wichtige Sache, auf die hingewiesen werden muss, ist, dass HTML5-Elemente standardmäßig als block angezeigt werden, aber IE8 weiß das auch nicht. Um dieses Problem zu mildern Sie entweder display: block; angeben könnten, wenn bestimmte Elemente Styling oder es tun Großhandel in Ihrem CSS:

header, nav, section, article, aside, footer { 
    display:block; 
} 

Beachten Sie, dass, wenn Sie einen HTML5 bewusst zurückgesetzt Sheet verwenden (wie this one), ist dies wahrscheinlich schon getroffen ist Sorge für dich.

---

Andere Weise js zu verwenden liberaries

Es gibt Workarounds in Form der html5shiv und Modernizr polyfill Skripten. Verwenden Sie eine dieser Bibliotheken, um älteren IE-Versionen HTML5-Tags hinzuzufügen.