Analyse und Lösungen für die Einschränkungen des IE bei CSS-Stylesheets_Experience-Austausch

Es gibt vier gängige Möglichkeiten, HTML-Dokumente mit CSS zu verknüpfen:

Link-Tags verwenden


Stilelemente verwenden

body{background:#fff;}
h1{font-size:2em;}

Verwenden Sie den @import-Befehl

Inline-Stil mit dem Style-Attribut (Inline-Stil) Das sind rote Wörter
In tatsächlichen Anwendungen wird die Verwendung von Inline-Stilen mit dem Stilattribut nicht empfohlen. Der Grund dafür ist nicht viel besser als das Schriftart-Tag und schwächt das zentralisierte Kontrolle von CSS. Vorteile des gesamten Erscheinungsbilds des Dokuments. Die ersten drei Methoden verwenden Link-Tags und Style-Tags und unterliegen den folgenden Einschränkungen im IE (einschließlich IE6, IE7 und IE8 Beta1):

Nur ​​das CSS, das mit den ersten 31 Link- oder Style-Tags im Dokument verknüpft ist, kann angewendet werden.

Ab dem 32. ist das mit dem Tag verknüpfte CSS ungültig. In der offiziellen IE-Dokumentation „Alle Stil-Tags nach den ersten 30 Stil-Tags auf einer HTML-Seite werden in Internet Explorer nicht angewendet“ wird diese Einschränkung ebenfalls erwähnt, einschließlich der Verwendung von .xsl. XML-Dateien unterliegen ebenfalls dieser Einschränkung. Aber es scheint, dass die falsche Menge geschrieben wurde. Bitte schauen Sie sich IE an:

Beispiel 1: 34 Style-Tags werden gleichzeitig angewendet
Beispiel 2: 1 Style-Tag und 34 Link-Tags werden gleichzeitig angewendet
Ein Style-Tag hat nur die ersten 31 @import-Anweisungen Effektive Anwendung.

Ab der 32. @import-Direktive ignorieren. Siehe:

Beispiel 3: Verwenden Sie die @import-Direktive 34 Mal in einem Style-Tag.

Nur ​​die ersten 31 @import-Anweisungen einer CSS-Datei werden effektiv angewendet.

Ab der 31. @import-Direktive ignorieren. Siehe:

Beispiel 4: Verwenden Sie das Link-Tag, um eine CSS-Datei einzuführen, die die @import-Direktive 34 Mal verwendet.
Beispiel 5: Verwenden Sie das Style-Tag, um eine CSS-Datei einzuführen, die die @import-Direktive verwendet 34 Mal
Beispiel 6: Verwenden Sie Link- und Style-Tags, um eine CSS-Datei einzuführen, die die @import-Direktive mehr als 31 Mal verwendet
Eine CSS-Datei darf 288 KB nicht überschreiten?

Diese Nachricht stammt von der CSS-Dateigrößenbeschränkung für Internet Explorer.

Das Kaskadierungslimit unter dem @import-Befehl darf 4 Ebenen nicht überschreiten

Beim Einfügen von CSS-Dateien über den @import-Befehl unter IE ist die fünfte Ebene ungültig. Dieses Limit ergibt sich aus dem Cascade-Limit über die @import-Regel. Aufgrund der unvollständigen Unterstützung von Browsern für die Verschachtelung mehrerer Ebenen sollten Sie 2 Ebenen nicht überschreiten, selbst wenn Sie die @import-Direktive zum Einführen von CSS-Dateien verwenden müssen.

Die CSS-Einschränkungen von IE treten in den meisten Fällen nicht auf. Selbst wenn Sie auf die beste Lösung stoßen, sollten Sie die CSS-Dateien und Antwort-Tags manuell oder über ein Back-End-Programm zusammenführen, um die Anzahl der http zu minimieren Anfragen ist das erste Prinzip zur Optimierung der Seitendarstellung.

Im IE kann der Wert von Inline- und eingebetteten Stilen über das document.styleSheets-Objekt geändert werden (unterstützt von Firefox, Opera9 und Safari3.1). Dieses Objekt ist nur verfügbar, wenn das Dokument Stil- oder Linkelemente enthält. Mithilfe von document.styleSheets.length können Sie tatsächlich erkennen, dass der Maximalwert unter IE 31 beträgt.Im Folgenden wird Javascript zum Zusammenführen von Link- und Style-Tags verwendet, um die Einschränkungen unter IE zu lösen:

var fnMergeStyleSheet = function(){
if(!document.styleSheets){
return; }
var aSheet = document.styleSheets,
aStyle = document.getElementsByTagName('style'),
aLink = document.getElementsByTagName('link');
if(aStyle.length + aLink. Länge                                                                                                                                                 🎜> //Weil der von der zurückgegebene Wert Die getElementsByTagName-Methode ist nodeList, also führen Sie beim Löschen eine Schleife in umgekehrter Reihenfolge durch for(var i=aStyle.length-1;i>-1;–i){
var o = aStyle[i]; aCssText.push(o.innerHTML);
if(i>0){
                 o.parentNode.removeChild(o); In ein Array kopiert werden aCloneLink
for(var i=aLink.length-1 ;i>-1;–i){
var o = aLink[i];
if(o.getAttribute && o.getAttribute('rel')==='stylesheet'){
                                                                                           
aCloneLink.push(o.cloneNode(true));                                                               Name('head')[0];
//Durch die vorherige Löschung sind nur noch 2 der ersten 31 Links bzw Stil-Tags bleiben höchstens übrig
//Durch erneutes Hinzufügen des Links aktiviert die Methode des Knotens sein styleSheet-Attribut, um den Stil
zu erhalten for(var i = aCloneLink.length-1;i>-1;–i) {
var o = aCloneLink[i];
oHead.removeChild(o);
aCssText.push(o.styleSheet.cssText); 0].cssText += aCssText.join(“);
} Das Obige ist nur eine einfache und grobe Lösung. Es gibt noch Bereiche, die verbessert werden können.

Das Medienattribut wird nicht berücksichtigt. Wenn mehrere Medien vorhanden sind, sollten diese natürlich nicht berücksichtigt werden. Ich empfehle jedoch, die entsprechenden Stile über die @media-Direktive in dieselbe Datei zu schreiben, wodurch die Anzahl der HTTP-Verbindungen zumindest reduziert werden kann.
Es löst nicht das Problem der 31-fachen Beschränkung des @import-Befehls. Tatsächlich können Sie seinen href-Wert extrahieren und ihn dann aktivieren. In praktischen Anwendungen wird jedoch empfohlen, die @import-Direktive durch das Link-Tag zu ersetzen, da die @import-Direktive im IE dem Schreiben des Link-Tags am Ende des Dokuments entspricht, was zu einem sofortigen Stil führt Problem beim Laden der IE5/6-Seite. Der wissenschaftliche Name ist „Flash of Unstyled Content“ (kurz FOUC). Dieser Fehler kann natürlich vermieden werden, indem ein Link oder ein Skriptelement in den Dokumentkopf eingefügt wird.
Wenn es auf der Seite viele Link- oder Stil-Tags gibt, sind im Allgemeinen viele davon gleich. Sie können dieselben Elemente entfernen, bevor Sie aCssText zusammenführen, um die Codemenge zu reduzieren.
Wenn Sie nicht das vorhandene Stilelement im DOM verwenden, um den Stilcode direkt über das cssText-Attribut hinzuzufügen, sondern ein neues Stilelement zum Hinzufügen erstellen, stellen Sie sicher, dass Sie zuerst das neue Stilelement zum DOM hinzufügen und dann Verwenden Sie den CSSText-Attribute-Add-Style-Code. Im Gegenteil, der hinzugefügte Stilcode scheint vor dem Hinzufügen vom Stilparser des IE6 analysiert zu werden, sodass sowohl !important als auch der Hack ungültig sind. Bitte sehen Sie sich Beispiel 7 an. Es wird nicht empfohlen, neue Stile durch Hinzufügen neuer Stilelemente hinzuzufügen, da dies leicht zu den Einschränkungen des IE führen kann.