HTML5 Shiv löst perfekt das Problem, dass IE (IE6/IE7/IE8) nicht mit HTML5-Tags_Javascript-Fähigkeiten kompatibel ist

Die semantischen Tags und Attribute von HTML5 ermöglichen Entwicklern die einfache Implementierung klarer Webseitenlayouts. In Verbindung mit der CSS3-Effektwiedergabe ist es sehr einfach, schnell umfangreiche und flexible Webseiten zu erstellen.

Die neuen Tag-Elemente von HTML5 sind:

Definieren Sie den Header der Seite oder des Abschnitts Definieren Sie die Fußzeile der Seite oder des Abschnitts

Definieren Sie den Navigationsbereich einer Seite oder eines Abschnitts; Ein logischer Bereich oder eine Kombination von Inhalten auf einer Seite; Text oder einen vollständigen Inhalt definieren
Definieren Sie ergänzende oder verwandte Inhalte;





Ihre Verwendung kann die Codesemantik intuitiver machen und die SEO-Optimierung erleichtern. Dieses neue HTML5-Tag wird jedoch in IE6/IE7/IE8 nicht erkannt und erfordert eine JavaScript-Verarbeitung. Hier sind einige Möglichkeiten.
Methode 1: JavaScript codieren

Wenn es sich um einen IE-Browser unter IE9 handelt, wird ein HTML5-Tag erstellt, sodass Nicht-IE-Browser diesen Code ignorieren und es keine unnötigen http-Anfragen gibt.

<!--[if lt IE9]> 
<script> 
  (function() {
   if (! 
   /*@cc_on!@*/
   0) return;
   var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
   var i= e.length;
   while (i--){
     document.createElement(e[i])
   } 
})() 
</script>
<![endif]-->

Zweite Methode: Verwenden Sie das html5shiv-Paket von Google (empfohlen)

Aufgrund der inländischen Google-Serverzugriffskarte wird empfohlen, das inländische CDN anzurufen

<!--[if lt IE9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Unabhängig davon, welche der oben genannten Methoden verwendet wird, muss das CSS des neuen Tags initialisiert werden. Da sich HTML5 standardmäßig wie Inline-Elemente verhält, müssen wir zum Layouten dieser Elemente CSS verwenden, um sie manuell in Blockelemente umzuwandeln praktisches Layout.

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

Code kopieren

Der Code lautet wie folgt: /*html5*/ Article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

Aber wenn Benutzer von ie6/7/8 Skripte deaktivieren, wird es zu einer nicht gestalteten „Whiteboard“-Webseite. Wie sollen wir das Problem lösen?

Wir können dem Ansatz von Facebook folgen, der darin besteht, Benutzer zum Aufrufen der Seite „/?_fb_noscript=1“ mit dem Noscript-Logo zu führen und die HTML5-Tags durch HTML4-Tags zu ersetzen. Dies ist einfacher, als viele Hacks zu schreiben Kompatibilität. Einige.

Dies kann den Benutzer zum Öffnen des Skripts führen oder direkt zur HTML4-Tag-Designoberfläche springen.