CSS 스타일시트에 대한 IE의 제한사항에 대한 분석 및 솔루션_경험교류

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

링크 태그 사용


스타일 요소 사용

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

@import 명령 사용

@import url(sheet1.css);
@import "sheet2.css";

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

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

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

예시 1: 34개의 스타일 태그가 동시에 적용됩니다
예시 2: 1개의 스타일 태그와 34개의 링크 태그가 동시에 적용됩니다
스타일 태그에는 처음 31개의 @import 명령 효과적인 적용.

32번째 @import 지시어부터 무시합니다. 참조:

예 3: 스타일 태그에서 @import 지시문을 34번 사용합니다.

CSS 파일의 처음 31개 @import 지시문만 효과적으로 적용됩니다.

31번째 @import 지시어부터 무시합니다. 참조:

예 4: 링크 태그를 사용하여 @import 지시어를 34번 사용하는 CSS 파일 소개
예 5: 스타일 태그를 사용하여 @import 지시문을 사용하는 CSS 파일 소개 34회
예 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를 사용하여 링크 및 스타일 태그를 병합하는 것입니다.

var fnMergeStyleSheet = function(){
if(!document.styleSheets){
return; }
var aSheet = document.styleSheets,
aStyle = document.getElementsByTagName('style'),
aLink = document.getElementsByTagName('link')
if(aStyle.length + aLink. 길이                                                                                                                                                           🎜> //스타일 태그에 스타일을 저장한 다음 태그를 삭제하되, 태그는 유지합니다. first // 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의 한계에 쉽게 도달할 수 있으므로 권장되지 않습니다.