인터넷 익스플로러의 margin (바깥 여백) 버그

인터넷 익스플로러에서 float 과 같은 방향으로 margin 여백을 주면 여백이 두 배가 되는 버그가 발생한다.

.example { float:left; margin-left:10px; } // 버그 : 왼쪽 여백이 20px 이 됨
.example { float:right; margin-right:10px; } // 버그 : 오른쪽 여백이 20px 이 됨 

이 여백 두 배 버그는 인터넷 익스플로러 6.0 이하에서 발생하며, 인터넷 익스플로러 7.0 이나 파이어폭스에서는 발생하지 않는다. 그리고 이 버그는 첫번째 float 상자에서만 발생한다.
해결 방법은 다음과 같이 display 속성값을 inline 으로 변경하면 된다.

.example { float:left; margin-left:10px; display:inline; }