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

Web 2007. 10. 14. 17:25 Posted by 알 수 없는 사용자

인터넷 익스플로러에서 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; }


(참고: http://www.positioniseverything.net/explorer/doubled-margin.html)