Wie man neue Elemente in HTML5 mit alten Browsern kompatibel macht_HTML5-Tutorial-Tipps

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.