Restrictions IE et solutions sur les feuilles de style CSS

Il existe quatre manières courantes d'associer des documents HTML à CSS :

1. Utiliser des balises de lien

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

2. Utilisez l'élément de style

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

3. Utilisez la directive @import

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

4. Style en ligne utilisant l'attribut style

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

Dans les applications réelles, le style en ligne utilisant l'attribut style n'est pas recommandé. XHTML1.1 a déconseillé son utilisation. dans la norme. La raison est simple. Cette méthode n'est pas bien meilleure que la balise font et affaiblit l'avantage du CSS pour contrôler de manière centralisée l'apparence de l'ensemble du document. Les trois premières méthodes utilisent des balises de lien et des balises de style et présentent les limitations suivantes dans IE (y compris IE6, IE7 et IE8 beta1) :

1. Il n'y a que les 31 premiers liens dans le document Ou le CSS associé à la balise style peut être appliqué.

   A partir du 32ème, le CSS associé à sa balise sera invalide. La documentation officielle d'IE Toutes les balises de style après les 30 premières balises de style sur une page HTML ne sont pas appliquées dans Internet Explorer mentionne également cette limitation, y compris cette limitation dans les fichiers .xml utilisant .xsl. Mais il semble que la mauvaise quantité ait été écrite. Veuillez regarder IE :

   Exemple 1 : 34 balises de style sont appliquées en même temps

   Exemple 2 : 1 balise de style et 34 balises de lien sont appliquées en même temps

2. Une balise de style n'est valable que pour les 31 premières @import instructions.

   Ignorer à partir de la 32ème directive @import. Veuillez consulter :

   Exemple 3 : Utilisez la directive @import 34 fois dans une balise de style.

3. Seules les 31 premières directives @import d'un fichier css sont effectivement appliquées.

   Ignorer à partir de la 31ème directive @import. Veuillez consulter :

   Exemple 4 : utilisez la balise de lien pour introduire un fichier CSS qui utilise la directive @import 34 fois

   Exemple 5 : utilisez la balise de style pour introduire un fichier CSS qui utilise la directive @import 34 fois Fichier

   Exemple 6 : Utiliser les balises de lien et de style pour introduire un fichier CSS qui utilise respectivement plus de 31 @import instructions

4. Un fichier CSS ne peut pas dépasser 288 Ko ?

   Cette nouvelle provient de la limite de taille de fichier CSS d'Internet Explorer.

5. La limite d'empilement sous la commande @import ne peut pas dépasser 4 couches

   Lors de l'introduction de fichiers CSS via la commande @import sous IE, la couche 5 deviendra invalide. Cette limite provient de la limite Cascade via la règle @import. En effet, en raison de la prise en charge imparfaite des navigateurs pour l'imbrication multi-niveaux, même si vous devez utiliser la directive @import pour introduire les fichiers CSS, ne dépassez pas 2 niveaux.

Les restrictions d'IE sur CSS ne seront pas rencontrées dans la plupart des cas. Même si vous rencontrez la meilleure solution, vous devez modifier le fichier CSS manuellement ou via un programme back-end fusionné avec la réponse. balises, minimiser le nombre de requêtes http est le premier principe pour optimiser le rendu des pages.

Dans IE, la valeur des styles en ligne et intégrés peut être modifiée via l'objet document.styleSheets (pris en charge par Firefox, Opera9 et Safari3.1). Cet objet n'est disponible que lorsque le document contient des éléments de style ou de lien. En effet, en utilisant document.styleSheets.length vous pouvez voir que la valeur maximale sous IE est de 31. Ce qui suit utilise Javascript pour fusionner les balises link et style afin de résoudre les limitations sous IE :

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;);
}

Ce qui précède n'est qu'une solution simple et approximative. Pour une démonstration, veuillez voir l'exemple 1 et. Exemple 2. Les domaines qui peuvent être améliorés sont :

1. ne prend pas en compte l'attribut media S'il y a plusieurs media, ils doivent être fusionnés séparément. 🎜> marqué link n'est pas pris en compte. Mais je recommande d'écrire les styles correspondants dans le même fichier via la directive rel="alternate stylesheet", ce qui peut au moins réduire le nombre de connexions HTTP. @media

2. ne résout pas le problème de la limite de 31 fois de l'instruction @import. En fait, vous pouvez extraire sa valeur href puis l'activer. Cependant, dans les applications pratiques, il est recommandé d'utiliser la balise

   pour remplacer la directive @import, car la directive link dans IE équivaut à écrire la balise de lien au bas du document, ce qui provoquera un style instantané problèmes lors du chargement de la page IE5/6 Nom scientifique Le bug appelé "Flash of Unstyled Content" (FOUC en abrégé) peut bien sûr être évité en plaçant un lien ou un élément de script dans l'en-tête du document. @import

3. De manière générale, toutes les balises

   ou link qui apparaissent sur la page sont susceptibles d'avoir plusieurs éléments identiques. Vous pouvez supprimer les mêmes éléments avant de fusionner aCssText avec. réduisez la quantité de code. style

Si vous n'utilisez pas les éléments de style existants dans le DOM pour ajouter du code de style directement via l'attribut cssText, mais créez un nouvel élément de style à ajouter, soyez assurez-vous de faire attention en premier. Ajoutez d'abord le nouvel élément de style au DOM, puis ajoutez le code de style via l'attribut cssText. Au contraire, le code de style ajouté semble être analysé par l'analyseur de style d'IE6 avant d'être ajouté, donc !imporant et le hack seront invalides. Veuillez consulter l'Exemple 7. Il n'est pas recommandé d'ajouter de nouveaux styles en ajoutant de nouveaux éléments de style, car cela peut facilement atteindre les limites d'IE.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!