IE6: CSS Double Margin Float Bug.
IE6에서 발생하는 ‘더블 마진 플롯 버그‘ 입니다. float된 요소에 float된 방향과 동일한 방향의 margin을 설정하는 경우 margin값이 두 배로 작용하는 버그 입니다. 이 버그는 float된 방향과 같은 방향으로 형제 엘리먼트가 존재하는 경우에는 발생하지 않습니다.
CSS
.a { float:left; height:100px; background:silver; padding:10px;}
.b { float:left; margin-left:100px; width:100px; height:100px; background:red; } /* IE6는 왼쪽 마진을 200px으로 출력 */
HTML
<div class="a">
<div class="b">.b</div>
</div>
Expected Result
‘.b’ 요소의 왼쪽으로 100px의 margin이 발생한다.
Expected Result
‘.b’ 요소의 왼쪽으로 100px의 margin이 발생한다.
IE6 Rendering
‘.b’ 요소의 왼쪽으로 잘못된 200px의 margin이 발생하게 된다.
Solution
float된 방향과 동일한 방향으로 margin을 설정하지 않는다. 부모 요소의 padding을 이용하거나 position, left, right 속성을 이용하여 배치 할 수 있다. 한편 float된 엘리먼트가 left, right 값을 갖게 되면 해당 엘리먼트의 display 속성이 block이 되는 특징이 있는데 이때 display속성을 inline으로 바꿔주면 IE6에서 더 이상 문제가 발생하지 않는다. 사실 display 속성을 inline으로 변경하더라도 해당 엘리먼트는 float 때문에 block 속성을 유지하게 되고 width, height와 같은 값들은 유지된다. Why is this happening? Don’t ask such silly questions! This is IE6, remember?
Reference
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
이미 선언된 클래스 이름을 다중 클래스 형식으로 재 사용 하고자 할 때 재 사용되는 클래스 이름을 마지막에 조합하지 않습니다.
Reference
