Umgang mit alten Browserversionen, die nicht mit H5 und C3 kompatibel sind

Dieses Mal erkläre ich Ihnen, wie Sie mit dem Problem umgehen können, dass die alte Version des Browsers nicht mit H5 und C3 kompatibel ist. Wie kann ich dafür sorgen, dass die alte Version des Browsers HTML5 unterstützt? Was sind die Vorsichtsmaßnahmen für ältere Versionen von Browsern, die mit H5 und C3 kompatibel sind? Hier sind tatsächliche Fälle, werfen wir einen Blick darauf.

HTML5 kann viel für uns tun, das Beste ist die Anwendung semantischer Tags. Wenn Sie seine Großartigkeit in Chrome oder anderen Browsern genutzt haben, die HTML5 unterstützen, dann muss dieser Artikel für Sie nützlich sein , denn jetzt können Sie HTML5 auch im IE verwenden.

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

Zunächst müssen Sie die html5.js-Datei von Google unten zitieren. Ich werde nicht auf die Vorteile eingehen:

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

Kopieren Sie den obigen Code in den Kopfteil. Denken Sie daran, dass es sich um den Kopfteil handeln muss (da der IE dieses Element kennen muss, bevor das Element analysiert wird, sodass diese js-Datei nicht von anderen Speicherorten aus aufgerufen werden kann, andernfalls wird dies der Fall sein ungültig)

Hauptsächlich geht es darum, diese HTML5-Tags in Blöcke wie Divs umzuwandeln. Okay, lassen Sie es uns einfach halten. Um es in einem Satz zusammenzufassen: Zitieren Sie html5.js, um HTML5-Tags blockig zu machen

Die zweite Methode: Codierung JavaScript

<!--[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]-->

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 zu konvertieren in Blockelemente. Praktisches Layout

/*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?

Wir Sie können dem Ansatz von Facebook folgen, der darin besteht, Benutzer zur 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, 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.

2. Machen Sie alte Browser mit CSS3 kompatibel (unvollständige Kompatibilitätslösung)

Ab Internet Explorer 8 unterstützt die IE-Serie kein CSS3. Um einige im IE häufig verwendete Effekte wie abgerundete Ecken und Schatten zu erzielen, müssen Sie einige redundante und bedeutungslose Elemente und Bilder verwenden, um diese Effekte zu erstellen. Nachdem ich davon genug hatte, dachte ich darüber nach, prägnantere, direktere und effektivere Methoden im CSS3-Stil zu verwenden, um diese Probleme zu lösen. Glücklicherweise ist selbst der viel kritisierte Internet Explorer selbst leistungsstark genug. Die einzigartige Technologie des IE kann einige CSS3-Effekte sehr gut erzielen.

Deckkrafttransparenz

Die Transparenz von Elementen kann einfach mithilfe von Filtern im IE erreicht werden.

background-color:green;   
opacity: .4;   
filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);

Transluzenter Bereich hier
Deckkraft: .4;

Filter:Alpha(Deckkraft=40);

Randradius-Verrundung/Box-Schatten-Box-Schatten /Text Shadow

Sie können Vector Markup Language (VML) und Javascript verwenden, um diese Effekte im IE zu erzielen. Nach dem Zitieren einer HTC-Datei können Sie in IE diese drei CSS3-Eigenschaften durchsuchen im Browser verwendet .

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Detaillierte Schritte zum Aufbau einer Buchverwaltungsplattform mit vue.js

So zählen Sie die Tabellensumme im Bootstrap Die Anzahl von

So implementieren Sie vue.js todolist

Das obige ist der detaillierte Inhalt vonUmgang mit alten Browserversionen, die nicht mit H5 und C3 kompatibel sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!