NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


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

  1. #bold.red
  2. #bold.green
  3. #bold.blue

IE6 Rendering

IE6 브라우저는 2~3번에 대하여 아무런 스타일도 처리하지 않고 출력하게 됩니다.

  1. #bold.red
  2. #bold.green – 잘못된 렌더링
  3. #bold.blue – 잘못된 렌더링

Solution

아이디와 클래스의 조합 대신 클래스와 클래스의 조합만을 사용합니다.

Reference

  1. CSS Bug in MSIE 6 – Selector with an ID and a Class on the Same Element
  2. IE6 Multi-Class Bug

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

  1. .red
  2. .blue
  3. .red.blue
  4. .red.bold.blue

IE6 Rendering

IE6 브라우저는 2~4번이 모두 동일한 스타일로 처리 됩니다.

  1. .red
  2. .blue – 잘못된 렌더링
  3. .red.blue – 잘못된 렌더링
  4. .red.bold.blue – 잘못된 렌더링

Solution

이미 선언된 클래스 이름을 다중 클래스 형식으로 재 사용 하고자 할 때 재 사용되는 클래스 이름을 마지막에 조합하지 않습니다.

Reference

  1. Multiple class names
분류: CSS,웹 디자인,웹 표준 | 2008년 12월 16일, 13:57 | 정찬명 | 댓글: 8개 |
트랙백URI - http://naradesign.net/wp/2008/12/16/371/trackback/

8개의 댓글이 있습니다.

  1. azki말하길

    사실 동일한 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 라는군요.

  2. 정찬명말하길

    제가 잘못된 예제를 넣었군요. 한 페이지에서 저렇게 출력한다는 것은 잘못된 예제죠. 수정해야 겠네요. 감사합니다.

  3. 유경민말하길

    azki 님이 말씀 하셨지만 하나의 document 에 id는 하나만 있어야 겠죠. 말씀하신대로 class의 조합으로 구현을 하거나 #부모엘리먼트id tagName.className 을 조합하여 하는 방법이 있겠네요 ^_^

  4. [...] 찬명님의 글에서도 알 수 있듯 IE6에서는 CSS multiple selector도 적용되지 않는데다가 child selector도 적용되지 않습니다. [...]

  5. 익명말하길

    요즘은.. dhtml을 많이 사용하기 때문에..
    하나의 #id만 사용하더라도 javascript등을 통해 class명을 바꾸기도 하는데..
    주의해야 되겠네요.^^
    TEST

    $(‘#testId’).removeClass(‘testClass’).addClass(‘newClass’);

  6. 유월말하길

    엇 마지막 예제에서ie6브라우저 .blue는 표현하지 않나요? 중복으로 class를 쓰지 않았는데요

  7. 유월말하길

    아하! 맞네요 -_- 헷갈렸네요 -0-

  8. 검둥이말하길

    정리가 잘 되있네요. 블로그에 담아갈게요~

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님