IE6 이하 버전에서 나타나는 '더블마진 플로트 버그'
float된 요소에 float된 방향과 동일한 방향의 margin을 설정하는 경우 margin값이 두배로 적용되는 버그입니다.
단, margin과 같은 방향으로 동일한 레벨의 Element가 존재하지 않을시에만 발생합니다.
.wrap{float:left; height:100px; background:#ccc; padding:10px;}
.floatbox{float:left; margin-left:50px; width:100px; height:100px; background:#FFFF00;}
<div class="wrap">
<div class="floatbox">floatbox</div>
</div>
IE6 이하 버전에서는 아래와 같이 margin-left 값이 두배로 적용되어 나타납니다.
단, 아래와 같이 margin과 같은 방향으로 동일한 레벨의 Element가 존재하지 않을시에만 발생합니다.
<div class="wrap">
<div class="floatbox">floatbox</div>
<div class="floatbox">floatbox</div>
<div class="floatbox">floatbox</div>
<div class="floatbox">floatbox</div>
</div>
이를 해결하기 위해서는 해당 Element에 {display:inline;} 값을 주면 IE6에선 더이상 문제가 발생하지 않습니다.
.wrap{float:left; height:100px; background:#ccc; padding:10px;}
.floatbox{float:left; margin-left:50px; display:inline; width:100px; height:100px; background:#FFFF00;}
하지만, 더블마진 버그가 발생하지 않게 코딩을 하는것이 가장 좋은 방법입니다.
해당 Element의 부모 요소의 padding값이나 position, left, right 속성을 이용해서 더블마진 버그가 발생하지 않게 코딩을 하는것이 핵을 사용하지 않아도 되는 방법일 것입니다.
