집 > 기사 > 웹 프론트엔드 > CSS 스타일 시트에 대한 IE 제한 사항 및 솔루션

CSS 스타일 시트에 대한 IE 제한 사항 및 솔루션

一个新手원래의: 2017-10-19 10:38:582286검색

HTML 문서를 CSS와 연결하는 네 가지 일반적인 방법이 있습니다.

링크 태그 사용

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

스타일 요소 사용

<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>

사용 스타일 속성을 사용한 인라인 스타일(inline style)
```
<p style="color:#f00;">这是红色的字</p>
```

실제 응용 프로그램에서는 스타일 속성을 사용한 인라인 스타일을 권장하지 않는다고 표준화했습니다. 이유는 매우 간단합니다. 글꼴 태그보다 훨씬 낫고 전체 문서의 모양을 중앙에서 제어하는 CSS의 장점을 약화시킵니다. 처음 세 가지 방법은 링크 태그와 스타일 태그를 사용하며 IE(IE6, IE7 및 IE8 베타1 포함)에서는 다음과 같은 제한 사항이 있습니다.

문서의 처음 31개 링크 또는 스타일 태그와 연결된 CSS만 사용할 수 있습니다. 적용된.

32일부터 태그와 연결된 CSS가 유효하지 않게 됩니다. IE의 공식 문서 HTML 페이지의 처음 30개 스타일 태그 이후의 모든 스타일 태그는 Internet Explorer에 적용되지 않습니다. 또한 .xsl을 사용하는 .xml 파일의 제한 사항을 포함하여 이 제한 사항을 언급합니다. 그런데 수량을 잘못 쓴 것 같습니다. IE에서 참고하세요:

예시 1: 34개의 스타일 태그가 동시에 적용됩니다

예시 2: 1개의 스타일 태그와 34개의 링크 태그가 동시에 적용됩니다
스타일 태그에는 처음 31개만 있습니다. times @import 명령이 효과적으로 적용됩니다. <code>@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(&#39;style&#39;),
    aLink  = document.getElementsByTagName(&#39;link&#39;);
    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;);
}

上面仅仅是一个简单的粗糙的解决方案，演示请看例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
🎜32번째 @import 지시어부터 무시하세요. 다음을 참조하세요: 🎜🎜예 3: 스타일 태그에서 @import 지시문을 34번 사용합니다. 🎜🎜🎜🎜🎜CSS 파일은 처음 31개의 @import 명령에만 유효합니다. 🎜🎜🎜31번째 @import 지시어부터 무시하세요. 다음을 참조하세요: 🎜🎜예제 4: 링크 태그를 사용하여 @import 지시문을 34번 사용하는 CSS 파일을 소개합니다🎜🎜예 5: 스타일 태그를 사용하여 @import 34회 >Css 파일 명령 🎜🎜예 6: 링크 및 스타일 태그를 사용하여 @import 명령을 31회 이상 사용하는 CSS 파일 소개 🎜🎜🎜🎜 🎜CSS 파일은 288kb를 초과할 수 없나요? 🎜🎜🎜이 소식은 Internet Explorer CSS 파일 크기 제한에 관한 것입니다. 🎜🎜🎜🎜🎜 @import 지시문의 계단식 제한은 4개 레이어를 초과할 수 없습니다.🎜🎜🎜IE에서 @import 지시문을 통해 CSS 파일을 도입하는 경우 다섯 번째 레이어는 유효하지 않습니다. 이 제한은 @import 규칙을 통한 계단식 제한에서 비롯됩니다. 실제로 다중 레벨 중첩에 대한 브라우저의 불완전한 지원으로 인해 @import 지시문을 사용하여 CSS 파일을 도입해야 하는 경우에도 2레벨을 초과하지 마십시오. 🎜🎜🎜🎜CSS에 대한 IE의 제한 사항은 대부분의 경우 발생하지 않습니다. 최상의 솔루션을 만나더라도 CSS 파일과 응답 태그를 수동으로 또는 백엔드 프로그램을 통해 병합해야 합니다. 최소 http 요청 수를 최대화하는 것입니다. 페이지 렌더링 최적화를 위한 첫 번째 원칙. 🎜🎜IE에서는 document.styleSheets 객체를 통해 인라인 및 임베디드 스타일의 값을 수정할 수 있습니다(Firefox, Opera9 및 Safari3.1에서 지원됨). 이 개체는 문서에 스타일 또는 링크 요소가 포함된 경우에만 사용할 수 있습니다. 실제로 document.styleSheets.length를 사용하면 IE에서 최대값이 31임을 알 수 있습니다. 다음은 IE의 제한 사항을 해결하기 위해 Javascript를 사용하여 link 및 style 태그를 병합하는 것입니다. 🎜rrreee🎜위는 간단하고 대략적인 해결책입니다. 예 1 참조 예 2와 마찬가지로 개선할 수 있는 영역이 있습니다. 🎜🎜🎜🎜 미디어 속성을 고려하지 않았습니다. 미디어가 여러 개인 경우 병합해야 합니다. 물론, link의 rel="alternate stylesheet" 태그의 영향입니다. 하지만 @media 지시문을 통해 동일한 파일에 해당 스타일을 작성하는 것이 좋습니다. 이렇게 하면 최소한 HTTP 연결 수를 줄일 수 있습니다. 🎜🎜🎜🎜은 @import 명령의 31회 제한 문제를 해결하지 못합니다. 실제로 href 값을 추출한 다음 활성화할 수 있습니다. 그러나 실제 애플리케이션에서는 IE의 @import 지시문이 링크 태그를 작성하는 것과 동일하므로 @import 지시문을 대체하기 위해 link 태그를 사용하는 것이 좋습니다. IE5/6에서 문제를 일으키는 문서 하단 페이지가 로드될 때 스타일 문제가 없습니다. 학명은 "Flash of Unstyled Content"(FOUC라고도 함) 버그입니다. 물론 이 버그는 발생할 수 있습니다. 문서 헤더에 링크나 스크립트 요소를 배치하면 이를 방지할 수 있습니다. 🎜🎜🎜🎜일반적으로 페이지에 많은 수의 링크 또는 스타일 태그가 나타나면 그 중 대부분이 동일할 가능성이 높습니다. aCssText를 병합하기 전에 항목을 줄입니다. 🎜

DOM에 있는 기존 스타일 요소를 사용하지 않고 cssText 속성을 통해 직접 스타일 코드를 추가하는 경우, 새로운 스타일 요소를 만들어 추가할 경우 반드시 먼저 DOM에 새 스타일 요소를 추가해야 하며, 그런 다음 cssText 속성을 통해 스타일 코드를 추가합니다. 반대로 추가된 스타일 코드는 추가되기 전에 IE6의 스타일 파서에 의해 파싱된 것으로 보이므로 !important와 해킹이 모두 유효하지 않습니다. 예제 7을 참조하세요. 새로운 스타일 요소를 추가하여 새로운 스타일을 추가하는 것은 IE의 한계에 쉽게 도달할 수 있으므로 권장되지 않습니다.

위 내용은 CSS 스타일 시트에 대한 IE 제한 사항 및 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS로 간단한 애니메이션 효과 구현다음 기사：CSS로 간단한 애니메이션 효과 구현