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
이미 선언된 클래스 이름을 다중 클래스 형식으로 재 사용 하고자 할 때 재 사용되는 클래스 이름을 마지막에 조합하지 않습니다.
Reference
출처 : http://naradesign.net/wp/2008/12/16/371/