IE6에서 보았을 때 레이아웃이 무너졌기 때문에,
원인을 찾고 있었습니다만, 복수 클래스를 셀렉터에 지정하고 있었기 때문이었습니다.
IE6에서는 여러 클래스의 구현이 지원되지 않는다고 조사했는데 완전히 잊었습니다.

잊지 않기 위해서도 기록에 남겨 둡니다.

전제: 다중 클래스

HTML

<div class="a_box">A box</div>
<div class="b_box">B box</div>
<div class="a_box b_box">c box</div>

CSS

.a_box{ background-color: green;}
.b_box{ background-color: red;}
.a_box.b_box{ background-color: yellow;}

css 측에서 클래스 이름을 연결하면,
이 두 클래스 (예에서 말하면 a_box와 b_box)가 지정된 스타일 만 내부 스타일을 적용 할 수 있습니다.

■chrome

IE6

IE6에서는 그대로 클래스명을 늘어놓으면,
가장 마지막 클래스 이름 단체에서만 볼 수 있습니다.

.a_box.b_box.c_box｛～｝
だと、.c_boxしか読み取っていません。

HTML

<div class="a_box"> box1</div>
<div class="b_box"> box2</div>
<div class="a_box b_box c_box"> box3</div>

샘플 css1

.a_box{ background-color: green;}
.b_box{ background-color: yellow;}
.a_box.c_box{ background-color: blue;}

■IE6



box3은 c_box 스타일만 작동합니다.
.a_box.c_box{ background-color: blue;}
↑ 이렇게.

그러나 이것이 아직 증명되지 않기 때문에 또 다른 패턴

샘플 CSS2

.a_box{ background-color: green;}
.b_box{ background-color: yellow;}
.a_box.b_box{ background-color: orange;}

본래라면
box2는 노란색이지만,

■chrome



IE6이라면,
a_box 클래스와 b_box 클래스가 지정되었을 때만 지정되면 배경색이 되어야 하는 오렌지색이 되어 버립니다.

■IE6



IE6에서는 .a_box.b_box로 읽고 있기 때문에 단순히 배경색 노란색을 오렌지색으로 덮어 쓰고 있습니다.

버그 회피 방법

이 버그는 선택기의 끝에서 클래스 스타일을 덮어 쓰려고 할 때
발생하는 것 같기 때문에, 마지막에 다른 것을 추가하면 회피할 수 있습니다.

아래에서는 셀렉터의 끝에 p를 넣는 것으로 회피하고 있습니다.

HTML

<div class="a_box"> box1</div>
<div class="b_box"> box2</div>
<div class="a_box b_box c_box"><p>box3</p></div>

CSS

.a_box{ background-color: green;}
.b_box{ background-color: yellow;}
.a_box.b_box p{ background-color: orange; margin-top: 0px;}

■IE6



모든 셀렉터의 마지막에 p를 넣어 버리면 결국은 마지막에 같은 명칭이 되어 버리기 때문에 안됩니다.
다른 이름을 넣어주세요.