IE restrictions and solutions to CSS style sheets

There are four common ways to associate HTML documents with CSS:

1. Use link tags

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

   Copy after login

2. Use style element

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

   Copy after login

3. Use @import directive

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

   Copy after login

4. Use style attribute Inline style (inline style)

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

   Copy after login

In actual applications, the inline style using the style attribute is not recommended. XHTML1.1 has standardized it as It is not recommended for the simple reason that this method is not much better than the font tag and weakens the advantage of CSS to centrally control the appearance of the entire document. The first three methods use link tags and style tags, and have the following limitations in IE (including IE6, IE7 and IE8 beta1):

1. There are only the first 31 links in the document Or the CSS associated with the style tag can be applied.

   Starting from the 32nd one, the CSS associated with its tag will be invalid. IE's official documentation All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer also mentions this limitation, including this limitation in .xml files using .xsl. But it seems that the wrong quantity was written. Please see it in IE:

   Example 1: 34 style tags are applied at the same time

   Example 2: 1 style tag and 34 link tags are applied at the same time

2. A style tag is only valid for the first 31 @import instructions.

   Ignore starting from the 32nd @import directive. Please see:

   Example 3: Use the @import directive 34 times in a style tag.

3. #Only the first 31 @import directives of a css file are effectively applied.

   Ignore starting from the 31st @import directive. Please see:

   Example 4: Use the link tag to introduce a css file that uses the @import directive 34 times

   Example 5: Use the style tag to introduce a css file that uses the 34 times@import css file with directive

   Example 6: Use link and style tags to introduce a css file that uses the @import directive more than 31 times respectively

4. A CSS file cannot exceed 288kb?

   This message comes from Internet Explorer CSS File Size Limit.

5. @The stack limit under the import command cannot exceed 4 layers

   When introducing css files through the @import command under IE, layer 5 will be invalid. This limit comes from Cascade limit via @import rule. In fact, due to the imperfect support of browsers for multi-level nesting, even if you have to use the @import directive to introduce CSS files, do not exceed 2 levels.

IE’s restrictions on CSS will not be encountered in most cases. Even if you encounter the best solution, you should modify the CSS file manually or through a back-end program. Merged with response tags, minimizing the number of http requests is the first principle for optimizing page rendering.

In IE, the values ​​of inline and embedded styles can be modified through the document.styleSheets object (supported by Firefox, Opera9 and Safari3.1). This object is only available when the document contains style or link elements. In fact, using document.styleSheets.length you can see that the maximum value under IE is 31. The following is using Javascript to merge link and style tags to solve the limitations under 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;);
}

The above is just a simple and rough solution, please see the demonstration Examples 1 and 2 can be improved:

1. does not consider the media attribute. If there are multiple media, they should be separated Merging, of course, did not consider the impact of the link mark rel="alternate stylesheet". But I recommend writing the corresponding styles in the same file through the @media directive, which can at least reduce the number of HTTP connections.

2. does not solve the problem of the 31 times limit of the @import instruction. In fact, you can extract its href value and then activate it. However, in practical applications, it is recommended to use the link tag to replace the @import directive, because the @import directive in IE is equivalent to writing the link tag at the bottom of the document, which will cause the problem in IE5/6 There is no style problem when the page loads instantly. The scientific name is "Flash of Unstyled Content" (abbreviated as FOUC) bug. Of course, this bug can be avoided by placing a link or script element in the document header.

3. Generally speaking, all the link or style tags that appear on the page are likely to have many the same tags, which can be combined with aCssText before merging Eliminate identical items and reduce the amount of code.

If you do not use the existing style elements in the DOM to add style code directly through the cssText attribute, but create a new style element to add, be sure to pay attention first First add the new style element to the DOM, and then add the style code through the cssText attribute. On the contrary, the style code it adds seems to be parsed by IE6's style parser before being added, so both the !imporant and the hack will be invalid. Please see Example 7. It is not recommended to add new styles by adding new style elements, as this can easily reach the limitations of IE.

The above is the detailed content of IE restrictions and solutions to CSS style sheets. For more information, please follow other related articles on the PHP Chinese website!