IE对CSS样式表的限制分析与解决方案_经验交流

HTML文档与CSS的关联常见有4种方式：

使用link标记


使用style元素

body{background:#fff;}
h1{font-size:2em;}

使用@import指令

使用style属性的内联样式(inline style) 这是红色的字
在实际应用中，使用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。다음은 IE의 제한 사항을 해결하기 위해 Javascript를 사용하여 링크 및 스타일 태그를 병합하는 것입니다.

var fnMergeStyleSheet = function(){
if(!document.styleSheets){
return; }
var aSheet = document.styleSheets,
aStyle = document.getElementsByTagName('style'),
aLink = document.getElementsByTagName('link')
if(aStyle.length + aLink. 길이                                                                       > // 반환된 값이 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) 배열에 복사됨
for(var i=aLink.length-1 ;i>-1;–i){
var o = aLink[i];
if(o.getAttribute && o.getAttribute('rel')==='stylesheet'){
                                                                                     
aCloneLink.push(o.cloneNode(true));                                                                 var oHead = document.getElements ByTagName('head')[0];
//이전 삭제를 통해 처음 31개의 링크 중 2개만 또는 스타일 태그는 최대한
남았습니다. //링크를 다시 추가하면 노드의 메소드는 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); 0].cssText += aCssText.join(”);
}
위의 내용은 간단하고 대략적인 해결 방법입니다. 아직 개선할 수 있는 영역이 있습니다.

미디어 속성은 고려되지 않습니다. 미디어가 여러 개인 경우에는 별도로 병합해야 합니다. 물론 링크 태그에 있는 rel="alternate stylesheet"의 영향은 고려되지 않습니다. 하지만 @media 지시문을 통해 동일한 파일에 해당 스타일을 작성하는 것이 좋습니다. 이렇게 하면 최소한 HTTP 연결 수를 줄일 수 있습니다.
@import 명령의 31회 제한 문제는 해결되지 않습니다. 실제로 href 값을 추출한 다음 활성화할 수 있습니다. 그러나 실제 응용 프로그램에서는 @import 지시문을 대체하기 위해 link 태그를 사용하는 것이 좋습니다. 이는 IE의 @import 지시문이 문서 하단에 링크 태그를 작성하는 것과 동일하므로 즉각적인 스타일이 발생하기 때문입니다. IE5/6 페이지가 로드될 때 발생하는 문제입니다. 학명은 "Flash of Unstyled Content"(줄여서 FOUC) 버그입니다. 물론 이 버그는 문서 헤더에 링크나 스크립트 요소를 배치하면 피할 수 있습니다.
일반적으로 페이지에 링크나 스타일 태그가 많으면 그 중 다수가 동일할 가능성이 높습니다. aCssText를 병합하기 전에 동일한 항목을 제거하면 코드 양을 줄일 수 있습니다.
DOM에 기존 스타일 요소를 사용하지 않고 cssText 속성을 통해 스타일 코드를 직접 추가하고, 새로운 스타일 요소를 생성하여 추가하는 경우에는 반드시 새로운 스타일 요소를 DOM에 먼저 추가한 후 사용하세요. cssText 속성 추가 스타일 코드를 사용하세요. 반대로, 추가된 스타일 코드는 추가되기 전에 IE6의 스타일 파서에 의해 구문 분석되는 것으로 보이므로 !important와 해킹이 모두 유효하지 않습니다. 예제 7을 참조하세요. 새로운 스타일 요소를 추가하여 새로운 스타일을 추가하는 것은 IE의 한계에 쉽게 도달할 수 있으므로 권장되지 않습니다.