IE-Einschränkungen und Lösungen für CSS-Stylesheets

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

1. Link-Tags verwenden

   <link rel="stylesheet" type="text/css" href="sheet.css" />

2. Verwenden Sie das Stilelement

   <style type="text/css">
   body{background:#fff;}
   h1{font-size:2em;}
   </style>

3. Verwenden Sie die @import-Direktive

   <style type="text/css">
   @import url(sheet1.css);
   @import "sheet2.css";
   </style>

4. Inline-Stil mit dem Style-Attribut

   <p style="color:#f00;">这是红色的字</p>

In tatsächlichen Anwendungen wird die Verwendung des Inline-Stils mit dem Style-Attribut nicht mehr empfohlen Im Standard ist der Grund einfach. Diese Methode ist nicht viel besser als das Font-Tag und schwächt den Vorteil von CSS, das Erscheinungsbild des gesamten Dokuments zentral zu steuern. 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):

1. Es gibt nur die ersten 31 Links Im Dokument oder Style-Tag zugehöriges CSS kann angewendet werden.

   Ab dem 32. ist das mit dem Tag verknüpfte CSS ungültig. In der offiziellen IE-Dokumentation „Alle Style-Tags nach den ersten 30 Style-Tags auf einer HTML-Seite werden in Internet Explorer nicht angewendet“ wird diese Einschränkung ebenfalls erwähnt, einschließlich dieser Einschränkung in .xml-Dateien, die .xsl verwenden. 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

2. Ein Style-Tag ist nur für die ersten 31 @importAnweisungen gültig.

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

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

3. 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 verwendet die @import-Direktive 34 Mal Datei

   Beispiel 6: Verwenden Sie Link- und Style-Tags, um eine CSS-Datei einzuführen, die mehr als 31 @import-Anweisungen bzw.

4. < verwendet 🎜> Eine CSS-Datei darf 288 KB nicht überschreiten?

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

5. Das Stapellimit unter dem @import-Befehl darf 4 Ebenen nicht überschreiten

   Beim Einführen von CSS-Dateien über den @import-Befehl unter IE wird Layer 5 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-Datei manuell oder über ein Back-End-Programm ändern Tags ist die Minimierung der Anzahl von http-Anfragen das erste Prinzip zur Optimierung der Seitendarstellung.

Im IE kann der Wert von Inline- und eingebetteten Stilen über das

-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. Tatsächlich können Sie anhand von document.styleSheets erkennen, dass der Maximalwert unter IE 31 beträgt. Im Folgenden wird Javascript verwendet, um die Tags document.styleSheets.length und link zusammenzuführen, um die Einschränkungen unter IE zu lösen: style

var fnMergeStyleSheet = function(){
if(!document.styleSheets){
    return;
}
var aSheet = document.styleSheets,
    aStyle = document.getElementsByTagName('style'),
    aLink  = document.getElementsByTagName('link');
    if(aStyle.length + aLink.length < 32 || !aSheet[0].cssText){        //document.styleSheets.cssText 只有IE支持 
        return;
    }
    var aCssText = [],aCloneLink = [];    //把style标签中的样式存入，然后删掉该标签，但保留第一个
    //因为由getElementsByTagName方法返回值是nodeList，所以删除时循环用倒序
    for(var i=aStyle.length-1;i>-1;--i){
        var o = aStyle[i];
            aCssText.push(o.innerHTML);
            if(i>0){
                o.parentNode.removeChild(o);
            }
    }    //在IE中只有在31之内的link标签才能通过其styleSheet.cssText获取样式
    //无法的获取复制到一个数组aCloneLink中
    for(var i=aLink.length-1;i>-1;--i){
       var o = aLink[i];
          if(o.getAttribute && o.getAttribute(&#39;rel&#39;)===&#39;stylesheet&#39;){
               if(o.styleSheet){
                  aCssText.push(o.styleSheet.cssText);
               }else{
                   aCloneLink.push(o.cloneNode(true));
               }
               if(i>0){
                   o.parentNode.removeChild(o);
               }
          }
    }
    var oHead = document.getElementsByTagName(&#39;head&#39;)[0];    //通过前面的删除，前31个link或者style标记最多只剩下2个
    //通过重新增加link节点的方法激活其styleSheet属性，从而获取样式
    for(var i = aCloneLink.length-1;i>-1;--i){
        var o = aCloneLink[i];
        oHead.appendChild(o);
        aCssText.push(o.styleSheet.cssText);
        oHead.removeChild(o);
    }   //把所有的样式都复制给第一个标签
    aSheet[0].cssText += aCssText.join(&#39;&#39;);
}

Das Obige ist nur eine einfache und grobe Lösung, siehe Beispiel 1 und Beispiel 2. Bereiche, die verbessert werden können, sind:

1. berücksichtigt nicht das

   -Attribut. Wenn es mehrere medias gibt, sollten diese natürlich separat zusammengeführt werden 🎜> markiert media wird nicht berücksichtigt. Ich empfehle jedoch, die entsprechenden Stile über die Direktive link in dieselbe Datei zu schreiben, wodurch die Anzahl der HTTP-Verbindungen zumindest reduziert werden kann. rel="alternate stylesheet"@media

löst nicht das Problem des 31-fachen Limits der @import-Anweisung. Tatsächlich können Sie seinen href-Wert extrahieren und ihn dann aktivieren. In praktischen Anwendungen wird jedoch empfohlen, das
2. -Tag zu verwenden, um die @import-Direktive zu ersetzen, da die

   -Direktive im IE dem Schreiben des Link-Tags am Ende des Dokuments entspricht, was zu sofortiger Wirkung führt Stilprobleme beim Laden der IE5/6-Seite Wissenschaftlicher Name Der Fehler namens „Flash of Unstyled Content“ (kurz FOUC) kann natürlich vermieden werden, indem ein Link oder ein Skriptelement im Dokumentkopf platziert wird. link@import

Im Allgemeinen enthalten alle
3. - oder

   -Tags, die auf der Seite angezeigt werden, wahrscheinlich viele der gleichen Elemente. Sie können die gleichen Elemente entfernen, bevor Sie aCssText mit zusammenführen Reduzieren Sie die Codemenge. link

Wenn Sie nicht die vorhandenen Stilelemente im DOM verwenden, um Stilcode direkt über das cssText-Attribut hinzuzufügen, sondern ein neues Stilelement zum Hinzufügen erstellen, be Stellen Sie sicher, dass Sie zuerst darauf achten. Fügen Sie zuerst das neue Stilelement zum DOM hinzu und fügen Sie dann den Stilcode über das CSSText-Attribut hinzu. 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.

Das obige ist der detaillierte Inhalt vonIE-Einschränkungen und Lösungen für CSS-Stylesheets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!