The limitations and solutions of IE on CSS style sheets

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

1. Using the link tag

   <link rel= "stylesheet" type= "Text/css" href= "Sheet.css"/>

2. Using the STYLE element

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

3. Using the @import directive

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

4. Inline style using the Style property (inline style)

   <p style= "color: #f00;" > This is the red word </p>

In practice, inline styles using the style attribute are deprecated, and XHTML1.1 has made it a standard deprecated, for the simple reason that it is not much stronger than the font tag, which weakens the benefits of CSS's centralized control over the appearance of the entire document. The first 3 methods use the link tag and the style tag, with the following limitations in IE (including IE6, IE7, and IE8 beta1):

2. Only the first 31 link or style tags associated with the CSS in the document can be applied.

   Starting with the 32nd, the CSS associated with its markup will be invalidated. IE official documents All style tags after the first of the style tags on a HTML page is not applied in Internet Explorer also mentions this limitation, including in the use of. xsl The. xml file also has this limitation. But it seems to have written the wrong number. Please see in IE:

   Example 1:34 Style tags applied at the same time

   Example 2:1 style tags and 34 link tags apply simultaneously

4. A style tag is applied only to the first 31 @import commands.

   Start ignoring the 32nd @import instruction. Please see:

   Example 3: Use 34 instructions in a style tag @import .

6. A CSS file is only valid for the first 31 times @import instructions.

   Start ignoring the 31st @import instruction. Please see:

   Example 4: Introducing a CSS file with a 34-time instruction using the link tag @import

   Example 5: Introducing a CSS file with a 34-time instruction with a style tag @import

   Example 6: Using link and style tags to introduce a @import CSS file with more than 31 instructions respectively

8. Cannot exceed 288kb for a CSS file?

   This message comes from the internet Explorer CSS File Size Limit.

10. Cascading limits cannot exceed 4 levels under @import instructions

    When the CSS file is introduced via the @import command under IE, the 5th layer will fail. This restriction comes from cascade limit via @import rule. In fact, because the browser support for multi-layered nesting is not perfect, even if you have to use the @import directive to introduce CSS files, do not exceed 2 layers.

The limitations of IE on CSS will not be met in most cases, even if the best solution is to manually or through the backend program to the CSS file and the response of the markup to merge, the minimum number of HTTP requests is the first principle of optimizing page rendering.

In IE, you can document.styleSheets modify the values of inline and embedded styles through objects (both Firefox, OPERA9, and Safari3.1 support). This object is only available when the document contains a style or link element, in fact it document.styleSheets.length can be seen that the maximum value of IE is 31. The following is the use of JavaScript to merge link and style tag to solve the restrictions under IE:

var fnmergestylesheet = function () {if (!document.stylesheets) {return;} var asheet = document.stylesheets, Astyle = document.getElementsByTagName (' style '), ALink = Document.getelementsbyt    AgName (' link '); if (astyle.length + alink.length < | |!asheet[0].csstext) {//document.stylesheets.csstext only IE support retur    N    } var acsstext = [],aclonelink = []; Save the styles in the style tag, and then delete the label, but leave the first//because the return value of the getElementsByTagName method is nodelist, so the loop is reversed 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 IE only within 31 of the link tag can get the style through its stylesheet.csstext//cannot get copied into an array aclonelink for (Var i=alink.length-1;i>-1          ;----) {var o = alink[i]; if (O.getattribute && o.getattribute (' rel ') = = = ' stylesheet ') {if (O.stylesheet) {ACSST               Ext.push (O.stylesheet.csstext);       }else{            Aclonelink.push (O.clonenode (true));               } if (i>0) {o.parentnode.removechild (o);    }}} var ohead = document.getElementsByTagName (' head ') [0]; With the previous deletion, the top 31 link or style tags are left at most 2/////by activating their Stylesheet property by re-adding the link node to get the style for (var i = aclonelink.length-1;i>-1;        -i) {var o = aclonelink[i];        Ohead.appendchild (o);        Acsstext.push (O.stylesheet.csstext);    Ohead.removechild (o); }//Copy all the styles to the first label Asheet[0].csstext + = Acsstext.join (");}

Above is just a simple rough solution, demo See Example 1 and Example 2, can improve the place also:

1. Without considering media this attribute, if there are multiple media should be merged separately, of course not consider the link rel="alternate stylesheet" impact of the tag. However, I would suggest that @media the corresponding style be written in the same file by instruction, at least the number of HTTP connections can be reduced.

2. There is no problem to solve the @import instruction 31 limit, in fact, you can extract its href value and then activate processing. But the actual application in the proposed use of link tags to replace the @import directive, because in IE, the directive is equivalent to the @import link tag written at the bottom of the document, will cause the IE5/6 page load when no style problem, learning called "Flash of unstyled Content" (Fouc), of course, you can avoid this bug by placing a link or script element in the document header.

3. In general, all of the pages appear in a large number of link or tags are likely to have a lot of the style same, you can remove the same items before Acsstext merge, reduce the amount of code.

if not Style elements that already exist in the DOM add style code directly through the Csstext property, but instead create a new style element to add, be sure to add the new style element to the DOM first, and then add the style code through the Csstext property. Conversely, the style code it adds seems to be parsed by the IE6 style parser before it is added, so that both!imporant and hack will fail. See example 7