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:
--------------------------------------- -----IE6-Browser-- ------------------------------------------- --


---------------------------------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
Der Code lautet wie folgt:


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ße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Verschachtelte Tabelle in HTML

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Tabellenrahmen in HTML

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

HTML-Rand links

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

HTML-Tabellenlayout

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Text in HTML verschieben

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

HTML-geordnete Liste

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

HTML-Onclick-Button

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

HTML-Eingabeplatzhalter

See all articles