Heim
Web-Frontend
H5-Tutorial
Wie man neue Elemente in HTML5 mit alten Browsern kompatibel macht_HTML5-Tutorial-Tipps



Wie man neue Elemente in HTML5 mit alten Browsern kompatibel macht_HTML5-Tutorial-Tipps
May 16, 2016 pm 03:47 PM
html5
Eine Frage, die uns der Lehrer gestellt hat, lautet: Wie kann IE8 mit diesen Tags kompatibel gemacht werden? (Sie müssen das DOM in JS entwerfen)
Obwohl ich heute gerade darüber gesprochen habe, müssen Sie es trotzdem verstehen.
Code kopieren
Der Code lautet wie folgt:<span style=" Schriftgröße: 14 Pixel; Farbe: #FF6666; 🎜><title>HTML5-neue Elemente sind mit alten Browsern kompatibel - HTML5-freier </head>
<header> 🎜><nav>Navigationsbereich</nav>
<article>Artikelbereich</article> ;/html></span>
wird angezeigt als:
|---------- ------------ --------Firefox--------------------------------- -------- ---------|
|Navigationsbereich|
| 🎜>
|----------------------- ------- -------------------------------------------| 🎜>Der Anzeigestil in älteren Browsern ist:
---------------------------------IE8-Browser------ ----- ------------------------------------------
Es ist alles das Gleiche Wenn ich mich nicht irre, erkennen alte Browser diese neu hinzugefügten Tags nicht und verwenden daher Inline-Elemente, um damit umzugehen. Daher besteht eine Lösung darin, sie in Blockelemente umzuwandeln, damit sie nicht im Die gleiche Zeile, damit der gleiche Effekt sowohl im alten als auch im neuen Browser angezeigt werden kann, besteht darin, den Browser das Tag erkennen zu lassen. Die spezifische Lösung zum Hinzufügen neuer Tags ist:
IE8/IE7/. IE6 unterstützt Dokumente, die von der Methode createElement generiert werden. Mit dieser Funktion können Sie diesen Browsern die Unterstützung neuer HTML5-Tags ermöglichen. Der Code lautet wie folgt:
document.createElement('new tag'); //Neues Tag hinzufügen
Der JS-Code lautet wie folgt:
Kopieren Sie den Code

Der Code lautet wie folgt:

<script> ;
document.createElement('nav'); ');
document.createElement('footer');
</script>
Oder erstellen Sie Tags direkt in einer Schleife:
Code kopieren
var e = "Abbr, Article, Aside, Audio, Canvas, Datalist, Details, Dialog, Ereignisquelle, Abbildung, Fußzeile, Kopfzeile, Hgroup, Markierung, Menü, Meter, Navigation, Ausgabe, Fortschritt, Abschnitt, Zeit, Video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[ i])
}
CSS-Stileinstellung Standardstil:
Code kopieren
Der Code lautet wie folgt:<style> figcaption, Figure, Footer, Header, Hgroup, Menu, Nav, Section, Summary{
display : block
}
</style> besteht darin, die Framework-Methode zu verwenden und bedingte Kommentare und JS-Code zu verwenden, um
Code kopieren
Der Code lautet wie folgt: <span style="font-size:14px;color:# FF6666;"><!--[if lt IE 9]> ="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> ;
<![endif]--></span> 🎜>Sie können das Kompatibilitätsproblem lösen, indem Sie diese Codezeile direkt hinzufügen in den Bedingungen <!--wenn IE9> bestimmt werden soll, ob der Browser kleiner ist Wenn ja, führen Sie diesen JS-Code aus. Wenn nicht, ignorieren Sie ihn. Was den Link in JS betrifft, öffnen Sie ihn einfach und werfen Sie einen Blick darauf. Es handelt sich ebenfalls um einen großen Codeabschnitt.
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heißer Artikel
Wie lange dauert es, um Split Fiction zu schlagen?
3 Wochen vor
By DDD
Repo: Wie man Teamkollegen wiederbelebt
3 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌

Hot-Tools-Tags

Heißer Artikel
Wie lange dauert es, um Split Fiction zu schlagen?
3 Wochen vor
By DDD
Repo: Wie man Teamkollegen wiederbelebt
3 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
