평가 순서가

그것은 나에게 나타납니다 크롬, 사파리 (시작이 가능하기 때문에)를 head에서 style 및 link 요소의 순서를 존중 파이어 폭스의 최신 버전을 포함한 모든 최신 브라우저; 자바 스크립트를 사용하여 런타임 중에 동적으로 생성되고 추가 된 경우에도 마찬가지입니다.평가 순서가

예를 들어 여기 red.css과 green.css은 모두 본문 배경색을 지정합니다. 본체 배경 레드 제 세트는 2 세트 녹색 :

<head> 
    <!-- other code --> 
    <link rel="stylesheet" href="red.css" type="text/css"> 
    <link rel="stylesheet" href="green.css" type="text/css"> 
</head>

결과 green.cssred.css는 뒤에 배치하고 나중에 평가되므로 신체의 배경색이 녹색이다.

요소의 순서는 link 요소가 동적으로 만들어져 머리에 삽입 된 경우에도 유지됩니다. 예를 들어, green.css을로드하는 link 요소를 동적으로 생성하면 red.css 뒤에 삽입 된 경우에만 본문 배경색이 녹색으로 설정됩니다.

그러나이 점을 고려하지 않는 브라우저는 Internet Explorer (적어도 IE 7-9는 아닙니다)입니다. IE에서는 가장 최근에 추가 된 link 또는 style 요소가 이미 평가 된 모든 최상위에서 평가됩니다. 그것은 런타임 동안 추가 될 때 트리 순서를 존중하지 않습니다.

비표준 동작을 존중합니까? 아니면 Internet Explorer 버그입니까? Internet Explorer에서이 문제를 어떻게 해결할 수 있습니까?

기존의 모든 link 및 style 요소를 동적으로 제거하고 같은 트리 순서로 다시 추가하는 것이 좋습니다. 즉 평가할 순서입니다.

어떤 통찰력이라도 대단히 감사하겠습니다.

UPDATE 여기

요청한 자세한 코드 샘플이다 red.css의

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="red.css" type="text/css"> <!-- sets red --> 
</head> 
<body> 

<script type="text/javascript"> 

    setTimeout(function() { 

     // IE7-8 does not support referencing document.head 
     var head = document.getElementsByTagName("head")[0]; 

     var link = document.createElement("link"); 
     link.setAttribute("href", "green.css"); 
     link.setAttribute("rel", "stylesheet"); 
     link.setAttribute("type", "text/css"); 

     // All modern browesers will leave the background 
     // color red, except IE will set it green. 
     head.insertBefore(link, head.firstChild); 

     // Now comment out the above line and try adding the link 
     // using this instead. All modern browsers (including IE) 
     // will set the body background color green after two seconds. 
     // IE seems to always evaluate the last dynamically added link. 

     // head.appendChild(link); 

    }, 2000); 

</script> 

</body> 
</html>

내용량 : green.css의

body { background-color: red; }

내용량 :

body { background-color: green; }

출처

2012-09-03 Peter

문서에 두 번째 링크 만있는 경우 첫 번째 문서는 두 번째 문서보다 먼저 동적으로 추가됩니다. IE에서 첫 번째 링크가 우선 적용됩니까? 나는. "캐스 캐 이드 (cascade)"되지 않았습니까? 테스트 케이스를 제공 할 수 있습니까? – RobG

@RobG, 맞습니다. 내 모든 테스트에서 이것은 동적으로'link' 엘리먼트를 생성 할 때 IE의 경우입니다. 사실상 다른 모든 브라우저는 게재 순위를 준수합니다. – Peter

IE9에서 문제가 지속되는 것처럼 보입니다. 필요한 순서대로 모든 스타일 시트를 동적으로 추가한다는 아이디어는 아마도 여러분이 할 수있는 최선의 방법 일 것입니다. – RobG

당신이 말하는 것은 캐스케이 딩 스타일 시트 (CSS)가 작동하는 방식의 매우 중요한 기능입니다. IE를 포함하여 모든 브라우저가 이러한 방식으로 작동합니다. 그들이 캐스 캐 이드하지 않으면, 그것은 큰 문제가 될 것입니다.

그러나 일부 버전의 IE에서는 작동하지 않는 스타일이 있습니다. 사용자가보고있는 스타일은 제대로 작동하지 않는 CSS 스타일이 아니라 제대로 작동하지 않는 스타일 일 수 있습니다. 특정 사례를 게시 하시겠습니까?

출처

2012-09-03 01:13:29 zenkaty

캐스케이드는 IE에서 작동하지만, 런타임 중에 새로운'link' 또는'style' 엘리먼트가 동적으로 생성되고 추가되면, 배치 된 위치에 상관없이 기존 캐스케이드의 맨 위에서 평가됩니다. 문제는 동적으로 추가 할 때 IE에서 트리 순서가 존중되지 않는다는 것입니다. 나는 다른 모든 브라우저처럼 캐스케이드 전체를 재평가 할 것을 기대한다. 어쩌면 이것이 표준적인 행동이 아니겠습니까? – Peter

나는 본다. 무슨 소리 야? http://stackoverflow.com/questions/1184950/dynamically-loading-css-stylesheet-doesnt-work-on-ie – zenkaty

감사합니다. @zenkaty, 나도 그걸 보았습니다. 그 질문은 내가하는 것처럼 캐스케이드에 대한 평가 순서를 다루지 않습니다. – Peter

스타일 시트를 다시 추가하는 대신 다시 렌더링해야하는 속성을 토글하려면 어떻게해야합니까? 예를 들어 모든 link/style 요소를 반복 할 수 있으며 media 특성을 none으로 설정 한 다음 다시 원래대로 설정하십시오.

출처

2012-09-03 02:02:58

감사합니다. @ o.v., 흥미로운 아이디어입니다. 요소를 제거하고 다시 추가하는 것이 관건입니다. 나는 그것을 시험 할 것이고, 그것이 효과가 있다는 것을 알 것이다! – Peter

매력으로 작동! 이건 정말 내 * SA를 구한 – LocalJoost

스타일 시트를 삽입하여 실제로 어떤 문제에 대한 세부 사항을 말하지는 않지만, 스타일 시트를 동적으로 삽입하는 대신 실제 문제를 해결할 수있는 더 좋은 방법이있을 수 있습니다. 목록의 특정 순서.

예를 들어 두 가지 스타일 시트 (다른 클래스의 키를 수정하기 위해 약간 수정 됨)를 사용하고 <body> 태그에 단일 클래스를 추가하거나 제거하면 녹색에서 빨간색 또는 그 반대로 변경 될 수 있습니다.

출처

2012-09-03 06:24:29 jfriend00

기술적으로 올바른 최고의 올바른 종류입니다! +1 –

통찰력을 가져 주셔서 감사합니다. 문제를 피함으로써 해결할 수있는 문제가 있음을 알고 있습니다. 그러나, 여기 정확히는 그렇지 않습니다. 비 관입 JS 라이브러리 용입니다. 문제는 실제로 쉽게 해결할 수 있으며, 사용자가 스스로 발을 쏠 수있는 방법의 수를 최소화하고자합니다. – Peter

평가 순서가

답변

관련 문제