IE Duplicate Characters Bug

이곳 저곳에서 알아본 결과 IE6 버전에서 부터 발생하는 버그이지만, IE7 버전에서도 일어나는 현상입니다.

나름대로 혼자 원인 파악을 해본 결과,

부 모 태그 아래 자식 태그들의 총 너비가 부모 태그와 같고 -꽉 찼다는 말이죠- 자식 태그가 float:left 속성일 때 자식 요소들 사이에 float 속성이 없는 태그 또는 주석이 있으면 마지막 출력 태그 부분의 문자가 중복 출력되는 걸로 (스스로의 합의하에) 결론이 나왔습니다.

그 float 속성이 없는 태그라는게, style 과 script 를 포함하는 거라 애매하더군요.

물론 표준에 따르면 style 과 script 는 head 사이에 넣어야 하지만, 사이트를 만드는 입장에서는 힘든일일 수 밖에 없습니다.

(각 페이지를 따로 만들고, 필요에 따라 각기 다른 페이지에서 불러다 쓰는 경우)



///

주석을 위아래 삭제함으로써 해결이 되는것들을 주석을 삭제하자니 그건 좀 아닌듯싶고...

margin-right:-3px 혹은 부모의 크기를 3px늘려주는것은 무언가 레이아웃측면에서 크기로 쇼부를 치는속성이 강해서...좀 꺼려지네요..

위에 제가 해결한 방법에 대해서는 나오지 않은거 같아서 올려봅니다...

제일 황당한 해결법이면서 제 생각에 제일 깔끔한방법입니다...

<style>
    .wrap {
        width: 200px;
        margin-top: 50px;
    }
    .left {
        float: left;
        display:inline;
        width: 100px;
        background:white; //<-추가 background:url(''); 이런식도 가능
    }
    .right {
        float: left;
        display:inline;
        width: 100px;
    }
</style>

<div class = "wrap">
    <div class = "left">100px</div>
    <span></span>
    <div class = "right">이 부분이 복사됨</div>
</div>

복사되는부분을 제외한 (같은 레벨의) 앞의 div등에 background 를 집어넣음으로써 해결이 가능합니다.


http://forum.standardmag.org/viewtopic.php?pid=13058