Mehrere Lösungen zur Lösung des Problems, HTML5 -Tags nicht zu unterstützen, die mit IE6/7/8 kompatibel sind

Autor：Eve Cole Aktualisierungszeit：2025-04-03 20:00:04

HTML5/"> Die Ära von HTML5 ist beliebt. Wenn Sie immer noch auf Browserkompatibilität warten, bedeutet dies, dass Sie mit dem Web nicht mehr in Kontakt sind. Dies liegt an der boomenden Entwicklung mobiler Kunden. Wenn Sie immer noch mit dem Meister von HTML5 beherrschen, sollten Sie HTML5 beherrschen und CSS3 -Technologien. Wenn Sie sich an den Front -Technologien befinden, können Sie sich ein paar Mal. Glauben Sie es nicht, ich kann nur sagen: Ob Sie es glauben oder nicht!

Schauen wir uns eine Standard -HTML5 -Tag -Struktur an: (Ich spreche hier nur über Tags, und sonst ist nichts anderes beteiligt)

<! DocType html>

<html>

<kopf>

</head>

<body>

</header>

</Abschnitt>

</article>

</body>

</html>

Die Weiterentwicklung des HTML5 -Tags liegt natürlich daran, dass seine Semantik intuitiver ist. Dies ist natürlich nur einer der Tipps des Fortschritts von HTML5. Einige Leute schlagen dies vor: Sagen Sie nicht, dass der Fortschritt von HTML5 revolutionär ist, aber Entwicklung! Ich habe keine Einwände gegen diese Aussage, aber sie ist in gewisser Hinsicht in der Tat revolutionär. Ich möchte hier nicht vom Thema abgehen, wir sprechen nur über Etiketten.

Wenn ich mich über ein so wunderbares semantisches Etikett begeistert, muss ich natürlich nicht nur fragen: Unterstützt das IE es? Leider ist die Antwort nein. Wenn Sie bereits Angst vor dem IE haben, müssen Sie seine endlose Folter weiter aushalten. (IE9 und IE10 sind bereits kompatibel und unterstützen HTML5 und CSS3/"> CSS3.0)

Aber Sie müssen froh sein, dass es in dieser Zeit, in der Sie leben, viele Genies gibt. Jemand hat Ihnen geholfen, dieses Problem zu lösen! Obwohl es nicht perfekt genannt werden kann!

Schauen wir uns mehrere Lösungen an, um das Problem zu lösen, HTML5 -Tags nicht zu unterstützen, die mit IE6/7/8 kompatibel sind:

1. JavaScript: Dokument.Createelenment (......)

Ein Grund, warum IE6/7/8 nicht unterstützt wird, ist, dass sie keine Fußzeile als gültiges HTML -Tag betrachten. Werden wir es also nicht einfach zu einem Etikett machen? Der direkteste Weg ist natürlich, JavaScript: document.createelenment (......) zu erstellen!

(Funktion(){

var element = ['Header', 'Fußzeile', 'Artikel', 'beiseite', 'Abschnitt', 'NAV', 'Menü', 'Hgroup', 'Details', 'Dialog', 'Abbildung', 'Figcaption'],

len = element.length;

while (len-) {

document.createelement (Element [i])

}

}) ();

Dies erstellt einfach ein paar typische HTML5 -Tags, damit sie in IE6/7/8 Tags werden können.

Jemand hat eine vollständige JS -Datei geschrieben, Sie müssen sie nur vorstellen, wie folgt:

<!-[wenn lt dh 9]>

<! [endif]-> Es gibt auch Schreiben

<!-[wenn lte dh 9]>

<! [endif]-> Der einzige Unterschied zwischen HTML5shiv und HTML5SHIM ist M und V, und es gibt keinen anderen Unterschied! Natürlich ist das nicht das, was ich gesagt habe. Der Originaltext lautet: ... Der einzige Unterschied ist, dass man einen M hat und man hat AV - das war's.

Hier möchten wir eine besondere Notiz machen: Das heißt, das einzigartige Annotationsurteil von IE:

LTE: Ist die Abkürzung von weniger als oder gleich, was weniger als oder gleich ist.

LT: Ist die Abkürzung von weniger als, was weniger als.

GTE: Ist die Abkürzung von größer als oder gleich, was größer als oder gleich ist.

GT: Ist die Abkürzung von größer als, was bedeutet, dass größer als.

! : Es bedeutet nicht gleich, das gleiche wie das nicht gleiche Beurteilungssymbol in JavaScript

Obwohl IE9 HTML5 -Tags unterstützt, ist die Unterstützung nicht sehr vollständig, sodass Sie auch LTE schreiben können, was von Ihrer Wahl abhängt!

Vergessen Sie natürlich nicht, die Anzeigeeigenschaft des neu erstellten Tags anzugeben. In den meisten Fällen möchte ich, dass das Tag blockiert wird:

Header, Fußzeile, Artikel, beiseite, Abschnitt, NAV, Menü, Hgroup, Details, Dialogfeld, Abbildung, Figcaption {Anzeige: Block}

2. Methoden zur Nistung von Tags

In der Tat, um es unverblümt auszudrücken, liegt dies daran, dass semantische HTML5 -Tags Nest Divs und andere verfügbare Tags und dann nur Styles für Divs schreiben. Ich stimme dieser Schreibmethode nicht zu. Das ist besser als es zu tun. Geben Sie dem Tag eine semantische ID oder Klasse!

<!-[wenn lt dh 9]>

Body> * .Sektion {

Farbe: #ff0;

}

</style>

<! [endif]->

Abschnitt .Sektion {Farbe: #f00;

}

</style>

<ABSECTION> <VIV> Inhaltstest ... </div> </Abschnitt>

Aber wenn es dieser Struktur ähnlich ist, ist es nicht sicher zu verwenden :

<nav>

<ul>

</ul>

</nav>

3. dh bedingte Kommentare

<!-[wenn lt ie 9]> <div> <! [endif]->

<!-[wenn dh 9]> <section> <! [endif]->

<!-[if! IE]> <!-> <abschnitt> <!-<! [endif]->

......

<!-[wenn lt ie 9]> </div> <! [endif]->

<!-[wenn dh 9]> </section> <! [endif]->

<!-[if! IE]> <!-> </section> <!-<! [endif]->

Schauen Sie sich das einzigartige Kommentarurteil des IE erneut an:

LTE: Ist die Abkürzung von weniger als oder gleich, was weniger als oder gleich ist.

LT: Ist die Abkürzung von weniger als, was weniger als.

GTE: Ist die Abkürzung von größer als oder gleich, was größer als oder gleich ist.

GT: Ist die Abkürzung von größer als, was bedeutet, dass größer als.

! : Es bedeutet nicht gleich, das gleiche wie das nicht gleiche Beurteilungssymbol in JavaScript

Ich glaube, jeder versteht, was los ist! Dies ist ein schmerzhafterer Weg! Eine große Menge an HTML -Code macht den Code, der ursprünglich noch verwirrender sein wollte. Und es ist nicht förderlich für Schreibstile.

4. Verwenden Sie XMLNs, um den Lebensraum des Dokuments zu definieren

XMLNS ist die Abkürzung des XHTML-Namespace, der sogenannte Namespace. Wie die DocType -Erklärung ist XMLNS ebenfalls eine Erklärung. Im Gegensatz zur DocType -Erklärung existiert in HTML -Dokumenten XMLNs in HTML -Dokumenten nicht. Die XMLNs, die wir normalerweise sehen, erscheinen in XHTML -Dokumenten.

<html xmlns = http: //www.w3.org/1999/xhtml Lang = en> Dies ist der ursprüngliche Namespace von XHTML, der nach HTML5 vereinfacht wurde.

<html lang = en> Die Methode aus den Elco Klingen -Protokollen erregte zu Beginn weit verbreitete Aufmerksamkeit. Diese Technik enthält einen XML -Namespace und verwendet Elemente mit dem Namespace -Präfix, wie z. B.:

<! DocType html>

<body>

<html5: Abschnitt>

<!-Inhalt->

</html5: Abschnitt>

</body>

</html>

Das Präfix von: HTML5 ist keine Standardmethode zum Schreiben, sondern auch andere Zeichen verwenden: HL5 ist auch in Ordnung. Mit dem Präfix erkennt der IE neue Elemente, sodass Stile angewendet werden können. In anderen Browsern funktioniert es genauso gut, also bauen Sie am Ende in jedem Browser erfolgreich die gleichen Elemente und den gleichen Stil.

Diese Methode hat einen klaren Fehler: Sie müssen einen XML-formatierten Namespace in HTML-Dokumenten verwenden, und Sie müssen dies auch in CSS tun:

html5/: Abschnitt {

Anzeige: Block;

}

Wie ist die Kompatibilität mit JS? Hier ist eine Test -DEML

<! DocType html>

<kopf>

html5/: Abschnitt {Anzeige: Block; Breite: 100px; Höhe: 50px; Hintergrund:#f00; Grenze: 1px fest blau; Farbe: #ff0; }

</style>

window.onload = function () {

alert (document.getElementById ("test"). Innerhtml + "--- id")

alert (document.getElementsByTagName ("Abschnitt") [0] .innerhtml + "--- Tagname")

alert (document.getElementsByTagName ("Abschnitt") [0] .innerhtml + "--- Großbuchstaben")

}

</script>

</head>

<body>

<HTML5: Abschnitt ID = "Test"> Inhalt </html5: Abschnitt>

</body>

</html>

Die Testergebnisse wurden von IE6/7/8 getestet, aber nur IDs können in FixFox und Chrom erhalten werden, sodass diese Methode keine akzeptable Methode ist!