HTML5 Shiv – So lösen Sie die Inkompatibilität von IE (IE6/IE7/IE8) mit HTML5-Tags

Die semantischen Tags und Attribute von HTML5 ermöglichen Entwicklern die einfache Implementierung klarer Webseitenlayouts. Die meisten Browser sind grundsätzlich mit HTML5 kompatibel, aber derzeit sind ie6/ie7/ie8 nicht mit HTML5-Tags kompatibel, daher ist eine Javascript-Verarbeitung erforderlich, um sie kompatibel zu machen

Methode 1: Javascript-Code

<!--[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(&#39;, &#39;);
    var i= e.length;
    while (i--){
        　　document.createElement(e[i])
    }
 })()
</script>
<![endif]-->

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.

Methode 2: Verwenden Sie das HTML5shiv-Paket von Google

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

(ps: FQ ist erforderlich, um die verlinkte Webseite zu öffnen. Außerdem wird beim Öffnen der Webseite „Nein“ angezeigt, selbst wenn ich FQ habe Dialer übrig, um Pass 0 auszuprobieren

Aufgrund der inländischen Google-Serverzugangskarte wird empfohlen, die inländische CDN anzurufen

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

Dieser Link steht für persönliche Tests zur Verfügung

Der js-Teil wurde geschrieben, aber es gibt immer noch ein kleines Problem. Wenn Sie auf Benutzer stoßen, die Skripte in IE6/7/8 deaktivieren, wird es zu einer nicht gestalteten „Whiteboard“-Webseite ?

Wir können uns auf den Ansatz von Facebook beziehen, der darin besteht, den Benutzer zum Aufrufen der Seite „/?_fb_noscript=1“ mit dem Noscript-Logo zu führen und das HTML5-Tag durch das HTML4-Tag zu ersetzen viele Hacks, um die Kompatibilität aufrechtzuerhalten.

<!--[if lte IE 8]> 
<noscript>
   <style>.html5-wrappers{display:none!important;}</style>
   <div class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
   </div>
</noscript>
<![endif]-->

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

Der JS-Teil ist gelöst, jetzt kommt der CSS-Teil. Das CSS muss diese neuen Elemente initialisieren, um die Layouteinstellungen zu erleichtern.

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

Hinweis: Ein gutes Gedächtnis ist nicht so gut wie ein schlechtes Schreiben. Ich werde einige praktische Probleme zusammenfassen, die während der Entwicklung aufgetreten sind, und Sie können sie vorlesen Wenn Sie noch einmal darauf stoßen, ist der Inhalt relativ einfach, jede Ähnlichkeit ist rein zufällig.

Weitere HTML5-Shiv-Methoden zur Behebung der Inkompatibilität von IE (IE6/IE7/IE8) mit HTML5-Tags finden Sie hier Auf der chinesischen PHP-Website finden Sie verwandte Artikel!