IE6 : CSS Multi Selector Bug.
IE6 : CSS Multi ‘id/class’ Bug
IE6에서 발생하는 ‘다중 선택자 버그‘ 입니다. 하나의 아이디와 여러개의 클래스를 교차 조합하여 선택자를 만드는 경우 IE6는 첫 번째 선택자의 조합(#bold.red)만을 유효하게 처리하고 나머지 선택자 조합을 무시하는 버그 입니다.
CSS
#bold.red { font-weight:bold; color:red; }
#bold.green { font-weight:bold; color:green; } /* IE6는 이 스타일을 처리하지 않음 */
#bold.blue { font-weight:bold; color:blue; } /* IE6는 이 스타일을 처리하지 않음 */
HTML
<body id="bold" class="red">#bold.red</body>
<body id="bold" class="green">#bold.green</body>
<body id="bold" class="blue">#bold.blue</body>
Expected Result
- #bold.red
- #bold.green
- #bold.blue
IE6 Rendering
IE6 브라우저는 2~3번에 대하여 아무런 스타일도 처리하지 않고 출력하게 됩니다.
- #bold.red
- #bold.green – 잘못된 렌더링
- #bold.blue – 잘못된 렌더링
Solution
아이디와 클래스의 조합 대신 클래스와 클래스의 조합만을 사용합니다.
Reference
IE6 : CSS Multi ‘class’ Bug
IE6에서 발생하는 ‘다중 클래스 버그‘ 입니다. 둘 이상의 클래스를 조합할 때 마지막에 선언된 클래스의 이름(.blue)이 다른 곳에서 이미 선언되어 있는 경우 다중 선택자의 다른 선택자 이름을 처리하지 않는 버그 입니다.
CSS
.red { color:red; }
.blue { color:blue; }
.red.blue { color:silver; text-decoration:underline; } /* IE6는 .red 선택자를 무시 */
.red.bold.blue { color:black; font-weight:bold; } /* IE6는 .red.bold 선택자를 무시 */
HTML
<ol>
<li class="red">.red</li>
<li class="blue">.blue</li>
<li class="red blue">.red.blue</li>
<li class="red bold blue">.red.blue.bold</li>
</ol>
Expected Result
- .red
- .blue
- .red.blue
- .red.bold.blue
IE6 Rendering
IE6 브라우저는 2~4번이 모두 동일한 스타일로 처리 됩니다.
- .red
- .blue – 잘못된 렌더링
- .red.blue – 잘못된 렌더링
- .red.bold.blue – 잘못된 렌더링
Solution
이미 선언된 클래스 이름을 다중 클래스 형식으로 재 사용 하고자 할 때 재 사용되는 클래스 이름을 마지막에 조합하지 않습니다.
사실 동일한 id 를 지정하는 것 자체가 모순이긴합니다. (물론 IE6의 CSS 다중선택자 버그는 최악입니다만^^)
id attribute 에 대한 레퍼런스내용입니다
id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.5.2
must be unique in a document 라는군요.
제가 잘못된 예제를 넣었군요. 한 페이지에서 저렇게 출력한다는 것은 잘못된 예제죠. 수정해야 겠네요. 감사합니다.
azki 님이 말씀 하셨지만 하나의 document 에 id는 하나만 있어야 겠죠. 말씀하신대로 class의 조합으로 구현을 하거나 #부모엘리먼트id tagName.className 을 조합하여 하는 방법이 있겠네요 ^_^
[...] 찬명님의 글에서도 알 수 있듯 IE6에서는 CSS multiple selector도 적용되지 않는데다가 child selector도 적용되지 않습니다. [...]
요즘은.. dhtml을 많이 사용하기 때문에..
하나의 #id만 사용하더라도 javascript등을 통해 class명을 바꾸기도 하는데..
주의해야 되겠네요.^^
TEST
$(‘#testId’).removeClass(‘testClass’).addClass(‘newClass’);
엇 마지막 예제에서ie6브라우저 .blue는 표현하지 않나요? 중복으로 class를 쓰지 않았는데요
아하! 맞네요 -_- 헷갈렸네요 -0-