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이 발생한다.
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?