NARADESIGN:BLOG

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


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

.b

IE6 Rendering

‘.b’ 요소의 왼쪽으로 잘못된 200px의 margin이 발생하게 된다.

.b

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

분류: CSS,웹 디자인,웹 표준 | 2008년 12월 16일, 23:07 | 정찬명 | 댓글: 15개 |
트랙백URI - http://naradesign.net/wp/2008/12/16/385/trackback/

15개의 댓글이 있습니다.

  1. naradesign's me2DAY말하길

    정찬명의 생각…

    Why is this happening? Don’t ask such silly questions! This is IE6, remember?…

  2. skell83말하길

    더블 마진 버그가 발생하기 위해서는 하나의 조건을더 충족시켜야합니다.

    그건 margin과 같은 방향으로 동일한 레벨의 Element가 존재하지 않을시에만 발생합니다.

    http://blog.naver.com/skell83/150038545931
    제일아래쪽의 내용과 첨부파일을 참고하세요

    더블마진이 발생하지 않게 코딩을한다면 핵을 사용할필요성은 없어지겠죠

  3. 정찬명말하길

    와우. 저도 미처 몰랐던 사실입니다. 포스트 첫 문장에 코멘트 해주신 내용을 추가해 두었습니다. 이거 포스팅 한번 할때마다 꼭 다른분들의 도움을 받게 되는데 너무 기분이 좋네요. ^^; 정말 감사합니다. 앞으로도 종종 부탁드려요. ㅎㅎ.

  4. Archive / Css / Float…

    인터넷 익스플로러에서 플로트의 마진이 두배가 되는 현상…

  5. 신현석말하길

    트랙백을 보냈는데 잘 안되네요. 스팸 처리 됐나? ㅎㅎ

  6. hyeonseok's me2DAY말하길

    신현석의 생각…

    플로트 더블 마진…정말 알 수 없는 일이죠. ㅎㅎ…

  7. 정찬명말하길

    앗, 현석님 트랙백 건져 올렸습니다. 스팸 플러그인이 트랙백에 지나치게 민감하게 반응하네요. 하지만 이번에 건져 올렸으니 앞으로는 스팸으로 분류되지 않을껍니다. ^^

  8. 치프말하길

    안녕하세요~ 제가 잘 몰라서 그러는데여.
    익스6의 더블마진을 해결하기위해 언더바를 붙인 _display:inline; 을 사용하셨는데,
    언더바 없이 display:inline; 을 사용하면 다른 브라우저에 악영향을 미치는건가여?!

    작업할때 언더바없이 사용해도 별 이상을 못봐서염~

  9. 정찬명말하길

    오히려 제가 잘 몰랐습니다. ㅡㅡ; 글 마무리에 명백한 오류가 있었고 현재 정정하였습니다. CSS의 float에 관한 스펙을 자세히 들여다 보니 float된 상자는 display 속성이 block이 된다는 특징이 있었고 이것을 제가 그동안 몰랐던 것입니다. 따라서 언더바 ‘_’ 핵 같은 것은 사용하지 않아도 됩니다. display속성을 inline으로 바꾸더라도 해당 엘리먼트는 block 상태를 유지하기 때문에 치프님께서 경험하신 대로 아무 이상이 없을 것입니다. 중요한 코멘트 주셔서 감사합니다.

  10. 길앞잡이말하길

    이거 유명한 버그지요~ 더블마진 ㅎ
    해결방법은 알고있었는데
    float 안에 float이 동일한방향의 마진이생길때
    버그가 생긴다는것은 처음알았어요~
    또하나 배우고 가네요 ~

  11. 김민말하길

    참 이상하네요..
    a클래스에 너비를 주지 않았는데 왜..마치 300px 준것 처럼 보이는걸까요?
    높이 100px 너비 100% 표현되어야 하는거 아닌가요?

  12. 정찬명말하길

    김민님, a 클래스가 float 되어 있어서 그렇습니다. float된 엘리먼트는 width값이 minimum이 되기 때문에 자식 요소의 너비만큼만 줄어드는게 정상입니다. a 클래스에 float:left 속성이 있는것을 못보셨나봐요. ^^

  13. 힘없는염소말하길

    이 있는데 이때 display속성을 inline으로 바꿔주면 IE6에서 더 이상 문제가 발생하지 않는다. 사실 display 속성을 inline으로 변경하더라도 해당 엘리먼트는 float 때문에 block 속성을 유지하게 되고 width, height와 같은 값들은 유지된다.

    플롯을 하게 되면 인라인 요소로 변경되더라도 블럭 속성을 유지한다..???
    플롯을 하게 되면 인라인 요소가 블럭 속성을 유지한다..???

    머가 맞을까요??ㅋ

  14. 정찬명말하길

    @힘없는염소
    둘 다 맞습니다. float은 원래 display 속성이 none이 아닌 이상 무조건 block 속성을 갖게 되고 이 속성은 덮어쓰기가 되지 않아요.

  15. Rinkal말하길

    Finding this post has solved my porblem

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님