Probleme mit der Browserkompatibilität mit HTML5 und CSS3

HTML5 und CSS3 sind sehr einfach zu verwendende und leistungsstarke neue Attribute. Der einzige große Fehler besteht darin, dass viele ältere Browser möglicherweise nicht kompatibel sind. Heute möchte ich Ihnen das Problem mitteilen, dass ältere Browser mit HTML5 und CSS3 kompatibel sind.

1. Lassen Sie alte Browser HTML5 unterstützen

HTML5 kann viel für uns tun. Am köstlichsten ist die Verwendung semantischer Tags, wenn Sie bereits Chrome oder andere Browser verwenden, die HTML5 unterstützen Wenn Sie seine Großartigkeit im Browser genutzt haben, 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:

JavaScript Codeinhalt in die Zwischenablage kopieren

1.14816b4c70c6b3d7458beaf7d14fd5e32cacc6d41bbb37262a98f745aa00fbf0 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 an anderen Speicherorten aufgerufen werden kann, da sie sonst ungültig ist)

Lassen Sie diese HTML5-Tags hauptsächlich in Klumpen wie p. Okay, lassen Sie es uns einfach halten, in einem Satz: Zitieren Sie html5.js, um HTML5-Tags blockig zu machen

Die zweite Methode: Codieren von JavaScript

JavaScript-Code kopiert den Inhalt in die Zwischenablage

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

1.<!--[if lt IE9]>   
2.<script>   
3.   (function() {  
4.     if (!   
5.     /*@cc_on!@*/ 
6.     0) return;  
7.     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;);  
8.     var i= e.length;  
9.     while (i--){  
10.         document.createElement(e[i])  
11.     }   
12.})()   
13.</script>  
14.<![endif]-->

verhält, müssen wir diese Elemente anordnen Verwenden Sie CSS, um sie für ein einfaches Layout manuell in Blockelemente umzuwandeln

XML/HTML-Code kopieren Sie den Inhalt in die Zwischenablage

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

Aber wenn Benutzer von IE6/7/8 Skripte deaktivieren, wird es zu einem stillosen „Whiteboard“ „Web Seite, wie sollen wir das lösen?

Wir können dem Ansatz von Facebook folgen, der darin besteht, Benutzer dazu zu bringen, die Seite „/?_fb_noscript=1“ mit dem Noscript-Logo aufzurufen und das HTML5-Tag durch das HTML4-Tag zu ersetzen. Das ist besser als Es ist einfacher, viele Hacks zu schreiben, um die Kompatibilität aufrechtzuerhalten.

XML/HTML-Code kopiert den Inhalt in die Zwischenablage

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

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

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.

Deckkraft-Transparenz

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

CSS-Code kopiert Inhalte in die Zwischenablage

Hier ist der halbtransparente Bereich

Deckkraft: .4;

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

filter:alpha( opacity=40 );

border-radius abgerundete Ecke/Box-Schatten-Box-Schatten/Text-Schatten-Text-Schatten

Im IE können Sie Vector Markup Language (VML) und Javascript verwenden, um diese Effekte zu erzielen , siehe IE-CSS3, nach der Referenzierung einer HTC-Datei können diese drei CSS3-Eigenschaften im

IE-Browser

verwendet werden.

CSS-Code kopiert Inhalte in die Zwischenablage

Tatsächlich verfügt der IE über eigene Filter, um Schatten- und Schlagschatteneffekte zu erzielen

1.-moz-border-radius: 15px; /* Firefox */ 
2.-webkit-border-radius: 15px; /* Safari 、Chrome */ 
3.border-radius: 15px; /* Opera 10.5+, IE6+ 使用 IE-CSS3*/ 
4.-moz-box-shadow: 5px 5px 5px #000; /* Firefox */ 
5.-webkit-box-shadow: 5px 5px 5px #000; /* Safari、Chrome */ 
6.box-shadow: 5px 5px 50px #000; /* Opera 10.5+，IE6+ 使用 IE-CSS3 */ 
7.behavior: url(ie-css3.htc); /*引用ie-css3.htc */

Schatten erzeugt einen kontinuierlichen, Verlaufsschatten

CSS-Code Inhalt in die Zwischenablage kopieren

CSS-Code Inhalt in die Zwischenablage kopieren

1.filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=10);

1.filter:progid:DXImageTransform.Microsoft.DropShadow( Color="#6699CC",OffX="5",OffY="5",Positive="1");

Der Filter scheint derselbe zu sein wie der vorhandene. Das HTC-Skript hat einen Konflikt, oder es kann als Funktion bezeichnet werden: Wenn beide gleichzeitig für ein Element aktiviert sind, wird der Filtereffekt auf seine untergeordneten Elemente übertragen

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

Verwandte Lektüre:

Implementierungsschritte für die Verwendung von Js zum Betreiben von HTTP-Cookies

Detaillierte Einführung in das BOM-Objektmodell von Js

Was ist der Unterschied zwischen div und span im HTML-Webseitenlayout

Das obige ist der detaillierte Inhalt vonProbleme mit der Browserkompatibilität mit HTML5 und CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!