Ausführliche Erläuterung zum Thema Kompatibilität alter Browser mit HTML5 und CSS3

Der folgende Editor bringt Ihnen einen Artikel über das Problem der Kompatibilität alter Browser mit HTML5 und CSS3. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Editor, um einen Blick darauf zu werfen

1. Lassen Sie alte Browser HTML5 unterstützen

HTML5 kann viel für uns tun, das Köstlichste ist die Semantik Für die Anwendung von Tags, wenn Sie es bereits in Chrome oder anderen Browsern verwendet 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 folgende html5.js-Datei von Google zitieren. Die Vorteile werden nicht erwähnt:

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

• 
  

Kopieren Sie den obigen Code in den Kopfabschnitt. Denken Sie daran, dass es der sein muss Kopfabschnitt (da der IE dieses Element kennen muss, bevor es analysiert wird, sodass diese JS-Datei nicht an anderen Orten aufgerufen werden kann, da sie sonst ungültig wird)

Hauptsächlich, um diese HTML5-Tags in Blöcke umzuwandeln, wie p. 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: Codieren von 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]-->

• 
  

Aber egal welche der oben genannten Methoden verwendet wird, das CSS des neuen Tags muss sein initialisiert. Weil HTML5 standardmäßig der folgende Ausdruck ist Inline-Elemente Um diese Elemente zu gestalten, müssen wir CSS verwenden, um sie für ein einfaches Layout manuell in Blockelemente umzuwandeln

/*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 einem ungestylten „Whiteboard“. " Webseite. Wir Wie lösen wir das Problem?

Wir können dem Ansatz von Facebook folgen, der darin besteht, Benutzer dazu zu führen, die Seite „/?_fb_noscript=1“ mit dem Noscript-Logo aufzurufen, und Ersetzen Sie das HTML5-Tag durch das HTML4-Tag. 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>
     <p class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.   
     </p>
</noscript>
<![endif]-->

• 
  

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

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 häufig verwendete Effekte im IE wie abgerundete Ecken und Schatten zu erzeugen, müssen Sie einige redundante und bedeutungslose Elemente und Bilder verwenden, um diese Effekte zu erzeugen. 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.

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

Durchscheinender Bereich hier

opacity: .4;
filter:alpha(opacity=40);

Randradius abgerundete Ecke/Box-Schatten-Box-Schatten/Text-Schatten-Text-Schatten

Vector Markup Language (VML) und Javascript können verwendet werden, um diese Effekte im IE zu erzielen. Siehe IE-CSS3. Nach dem Verweisen auf eine HTC-Datei können diese drei CSS3-Eigenschaften im IE-Browser verwendet werden.

CSS-CodeInhalt in die Zwischenablage kopieren

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

Tatsächlich verfügt der IE über einen eigenen Filter zur Implementierung von Schatten und Schlagschatten Effekt

Schatten erzeugt kontinuierliche Verlaufsschatten

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

Der durch Schlagschatten erzeugte Schatten weist keine Hell-Dunkel-Änderungen auf

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

Der Filter scheint mit dem vorhandenen HTC-Skript in Konflikt zu stehen, oder er kann als Funktion bezeichnet werden: Wenn beide gleichzeitig für ein Element aktiviert sind, wird der Filtereffekt auf seine untergeordneten Elemente übertragen

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung zum Thema Kompatibilität alter Browser mit HTML5 und CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!