Kommentar: In diesem Artikel wird hauptsächlich die Lösung vorgestellt, wie die neuen HTML5 -Elemente mit alten Browsern kompatibel sind. Freunde, die es brauchen, können sich darauf beziehen.
Eine Frage, was der Lehrer zu uns geworfen hat: Wie kann man IE8-kompatibel mit diesen Tags machen? (Erfordert Design von DOM in JS)Obwohl ich heute gerade darüber gesprochen habe, muss ich es immer noch verstehen.
<span> <! docType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> Vergleichen Sie die Kompatibilität neuer HTML5 -Elemente in alten Browsern - HTML5 Freedom </title>
</head>
<body>
<header> Top -Bereich </Header>
<Av> Navigationsbereich </nav>
<Aktion> Artikelbereich </article>
<fouter> unterer Bereich </footer>
</body>
</html> </span>
In Browsern, die HTML5 -Tags unterstützen, erscheint es als:
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
| Oberer Bereich |
| Navigationsbereich |
| Artikelbereich |
| |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Der Displaystil im alten Browser lautet:
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Alle haben den gleichen Effekt. Wenn Sie sich nicht irren, erkennt der alte Browser diese neu hinzugefügten Tags nicht, sodass sie alle mit Inline-Elementen gelöst werden. Daher gibt es einen Durchbruch in der Lösung, damit es zu einem Blockelement wird und nicht in derselben Linie liegt. Auf diese Weise kann der gleiche Effekt sowohl in neuen als auch in alten Browsern angezeigt werden. Darüber hinaus erkennt der Browser das Tag. Die spezifische Lösung für die Notwendigkeit, neue Tags hinzuzufügen, lautet:
IE8/IE7/IE6 unterstützt Tags, die über Document.Createelement -Methode generiert werden. Diese Funktion kann verwendet werden, um diese Browser zu ermöglichen, HTML5 -neue Tags zu unterstützen. Der Code ist wie folgt:
document.createelement ('neuer Tag'); // Hinzufügen, um ein neues Tag zu erstellen
Der JS -Code lautet wie folgt:
<Script>
document.createelement ('Header');
document.createelement ('nav');
document.createelement ('article');
document.createelement ('Fußzeile');
</script>
Oder erstellen Sie Tags direkt durch Looping:
var e = "ABBR, Artikel, beiseite, Audio, Leinwand, Datalist, Details, Dialog, Eventsource, Figur, Fußzeile, Header, Hgroup, Mark, Menü, Messgerät, NAV, Ausgabe, Fortschritt, Abschnitt, Zeit, Video" .Split (',');
var i = E.Length;
Während (i-) {
document.createelement (e [i])
}
Standardstil der CSS -Stileinstellung:
<Styles>
Artikel, beiseite, Leinwand, Details, FigCaption, Figur, Fußzeile, Header, Hgroup, Menü, NAV, Abschnitt, Zusammenfassung {
Anzeige: Block;
}
</style>
Eine andere Möglichkeit besteht darin, die Framework -Methode mit bedingten Kommentaren und JS -Code zu verwenden, um sie zu implementieren
<span> <!-[wenn lt dh 9]>
<Script> src = "http://html5shim.googlecode.com/svn/trunk/html5.js" </script>
<! [endif]-> </span>
Fügen Sie diesen Code einfach hinzu, um Kompatibilitätsprobleme in Bezug auf die bedingte Aufmerksamkeit zu erreichen
<!-wenn lt ie9>
Es ist zu bestimmen, ob es kleiner als IE9 oder darunter ist. Wenn ja, führen Sie diesen JS -Code aus. Wenn nicht, ignorieren Sie es. Was den Link in JS betrifft, können Sie es herausfinden, indem Sie ihn direkt öffnen und auschecken. Es ist auch ein großes Stück Code.