大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > CSS技巧 > IE对CSS样式表的限制分析与解决方案

IE对CSS样式表的限制分析与解决方案

关键词:IECSS样式表限制分析解决方案  阅读(603) 赞(9)

[摘要]本文是对IE对CSS样式表的限制分析与解决方案的讲解,对学习CSS编程技术有所帮助,与大家分享。
HTML文档与CSS的关联罕见有4种方式:

运用link标志

<link rel="stylesheet" type="text/css" href="sheet.css" />
运用style元素

<style type="text/css">
body{background:#fff;}
h1{font-size:2em;}
</style>
运用@import指令

<style type="text/css">
@import url(sheet1.css);
@import "sheet2.css";
</style>
运用style属性的内联款式(inline style)

<p style="color:#f00;">这是白色的字</p>
在实践使用中,运用style属性的内联款式是不引荐运用的,XHTML1.1曾经将其规范为不建议运用,缘由很复杂这种方式不比font标志强多少,减弱了CSS集中控制整个文档外观的优点。前3种方式应用了link标志和style标志,在IE(包括IE6、IE7和IE8 beta1)中有如上限制:

文档中只要前31个link或style标志关联的CSS可以使用。

从第32个开端,其标志关联的CSS都将生效。IE的官方文档All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer也提及这个限制,包括在运用.xsl的.xml文件也有这个限制。但是似乎写错了数量。请在IE看:

例1:34个style标志同时使用
例2:1个style标志和34个link标志同时使用
一个style标志只要前31次@import指令无效使用。

从第32个@import指令开端疏忽。请看:

例3:在一个style标志中运用34次@import指令。

一个css文件只要前31次@import指令无效使用。

从第31个@import指令开端疏忽。请看:

例4:用link标志引入一个运用34次@import指令的css文件
例5:用style标志引入一个运用34次@import指令的css文件
例6:用link和style标志辨别引入一个运用31次@import指令以上的css文件
一个CSS文件的不能超越288kb?

这个音讯来自Internet Explorer CSS File Size Limit。

@import指令上层叠限制不能超越4层

在IE下经过@import指令引入css文件时,第5层会生效。这个限制来自Cascade limit via @import rule。实践上,由于阅读器对多层嵌套的支持不完善,所以即便不得已运用了@import指令引入CSS文件,也不要超越2层。

IE对CSS的限制在绝大局部状况下是不会遇到的,即便遇到最佳的处理方案也应该是手动或许经过后端顺序对CSS文件和呼应的标志停止兼并,最小化的http恳求数是优化页面出现的第一准绳。

在IE中,可以经过document.styleSheets对象(Firefox、Opera9和Safari3.1都支持)修正内联和嵌入款式的值。该对象仅在文档包括style或link元素时可用,其适用document.styleSheets.length就可以看出IE下这个值最大是31。上面是应用Javascript来兼并link和style标志来处理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('rel')==='stylesheet'){
               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('head')[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(”);
}
下面仅仅是一个复杂的粗糙的处理方案,演示请看例1和例2,可以改良的中央还有:

没有思索media这个属性,假如有多个media应该辨别兼并,当然更没有思索link标志的rel="alternate stylesheet"带来的影响。但我更建议经过@media指令把相应的款式写在同一个文件中,至多可以增加HTTP衔接数。 
没有处理@import指令31次限制的成绩,其实可以提取其href值然后停止激活处置。但是实践使用在建议用link标志来替代@import指令,应为在IE中@import指令相当与把link标志写在文档的底部,会招致在IE5/6页面加载时霎时无款式成绩,学名叫“Flash of Unstyled Content”(简称为FOUC)的bug,当然可以经过在文档头中放一个link或script元素可以防止这个bug。 
普通来讲页面之一切呈现少量的link或许style标签很能够有很多是相反的,可以在aCssText兼并前除掉相反的项,增加代码量。 
假如不必DOM中已存在的款式元素直接经过cssText属性添加款式代码,而是创立一个新的款式元从来添加,一定要留意先把新建的款式元素先添加到DOM中,然后再经过cssText属性添加款式代码。反之,其添加的款式代码似乎先被IE6的款式解析器解析后才添加,这样!imporant和hack都将生效。请看例7。不建议经过添加新的款式元素的方式来添加新的款式,这样很容易到达IE的限制条件。


相关评论