<style>
    .wrap {
        width: 200px;
        margin-top: 50px;
    }
    .left {
        float: left;
        display:inline;
        width: 100px;
    }
    .right {
        float: left;
        display:inline;
        width: 100px;
        position:relative;   <<<<<<< 이부분이 추가됬습니다.
    }
</style>

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

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

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 를 집어넣음으로써 해결이 가능합니다.

그럼 이렇게 ? ㅋㅋㅋ

<style>
    .wrap {
        width: 200px;
        margin-top: 50px;
    }
    .wrap div {
        display:inline;
    }
    .left {
        float: right
        width: 100px;
    }
    .right {
        float: right;
        width: 100px;
    }
</style>

<div class="wrap">
    <!-- 주석을 달아보자 -->
    <div class="right">이 부분이 복사됨</div>
    <!-- 주석을 달아보자 -->
    <div class="left">100px</div>
    <!-- 주석을 달아보자 -->
    <span></span>
</div>

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

가끔씩 쓰던 방식인데
이런방식은 어떤가요?

컨텐츠의 순서가 바뀌어도 (스타일없을경우) 상관없는 부분이라면 괜찮을것도 같은데 말이죠..
아무래도 순서를 바꾸는건 안좋겠죠?

저도 경험한 적이 있는데 저같은 경우는 위의 경우와는 좀 다른 주석때문이었어요.

너무나 빈번한 주석 태그의 사용으로 맨 마지막 글자가 반복되더라구요.

여기저기 찾아봐서 주석을 지우는 걸로 문제는 해결되었지만, 그래도 뭔가 찜찜하더라구요.

주석 또한 플로팅이 없는 태그로 인식을 하는 모양입니다..

<style>
    .wrap {
        width: 200px;
        margin-top: 50px;
    }
    .left {
        float: left;
        display:inline;
        width: 100px;
    }
    .right {
        float: left;
        display:inline;
        width: 100px;
    }
</style>

<div class = "wrap">
    <div class = "left">100px</div>
    <!--주석-->
    <div class = "right">이 부분이 복사됨</div>
</div>

처음에 올린 소드와 주석 부분만 틀린 코드인데, 주석으로 인하여 버그가 생깁니다.

주석은 없으면 아쉽죠...

그럴때는 주석을 아래 코드와 같은 Conditional Comments로 바꾸면 됩니다.

<!--[if !IE]>주석<![endif]-->

이런 코드는 버그를 유발하지 않지만, 쓰기가 무지하게 귀찮다는 단점이 있습니다.. -_-a

너무나 빈번한 주석 태그의 사용으로 맨 마지막 글자가 반복되더라구요.

여기저기 찾아봐서 주석을 지우는 걸로 문제는 해결되었지만, 그래도 뭔가 찜찜하더라구요.

kikiroki님이 말씀해주신 내용도 많은 도움이 된 것 같습니다.

그래도 궁금한 것은.. 저 IE Duplicate Characters Bug 왜 생기는 걸까요? ㅡㅡ;

원초적 방법이네요 -_-

원인을 찾아내려 노력하신 kikiroki 님 대단해요~~~~

<div class="wrap">
    <div class="left">100px</div><!-- 테스트 -->
    <div class="right">이 부분이 복사됨</div>
    <br style="clear:left;" />
</div>

이런식의 방법도 있습니다~

답글 감사합니다.

참고 url 로 올린 곳의 예제 코드인데,

<style>
.demobox {
width: 250px; 
/*width: 259px;*/
border: 3px solid #4c6f42;
}

.demobox a:hover {
background: #dfd;  /*** This hover change triggers buggyness in the links ***/
}

.firstfloat {
float: left; 
width: 200px; 
background: #939a90; 
text-align: center; 
color: #fff;
}

.secondfloat {
float: left; 
width: 250px; 
/*margin-right: -9px;*/
margin-bottom: 2px; 
background: #fbdabb;
}

</style>

<!-- Begin live demo -->

<div class="demobox">

<div class="firstfloat">First float</div>

<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> 
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> 
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> 
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> 
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> 
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> 
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> 
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> 
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> 
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment -->

<div class="secondfloat">
<p style="padding: 0 0 0 20px; margin-bottom: 2px; margin-top: 0; border: 1px solid #f00;">
Second float<br /><br />

<span style="background: #f2ab82;">
In IE6 some of this text is replicated in a "mystery block element" that starts directly below 
the float. This light brown float has a 2px bottom margin which also duplicates into the mystery 
element, getting added to the bottom of the text if it is wrapped in a span as it has been 
here.
<br />
<a href="#">Test&nbsp;link</a>
<img src="images/pinecone3.jpg" alt="" style="border: 1px solid #3c4524;" />
</span>

</p>
</div>

<div style="clear: both; background: #b2d4af;">Cleared element</div>
</div>

<br /> 태그에 style을 지정하지 않아도 되더군요.

하지만, 1번 방법에 따른 문제점과 같은 문제가 발생합니다.

<br /> 태그를 반복되는 글이 사라질때 까지 추가해야되죠.

style에 주석 해논 부분은 2, 3번 방법이구요.

<div class="wrap">
    <div class="left">100px</div><!-- 테스트 -->
    <div class="right">이 부분이 복사됨</div>
    <br style="clear:left;" />
</div>

이런식의 방법도 있습니다~

간단한 예제 코드는 다음과 같은데

<style>
    .wrap {
        width: 200px;
        margin-top: 50px;
    }
    .left {
        float: left;
        display:inline;
        width: 100px;
    }
    .right {
        float: left;
        display:inline;
        width: 100px;
    }
</style>

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

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

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

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

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

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

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

일단 해결 방법은,

1. <div class = "iefix">&nbsp;&nbsp;&nbsp;&nbsp;</div> 같은 코드를 사용하는 법. (iefix 는 화면에 보이지 않게 하는 style)

2. 마지막 float 부분에 margin-right를 -3px 이상 추가하는 법.

3. 부모 태그의 넓이를 3px 이상 늘리는 법.

이렇게 요약이 되더군요.

위 3가지 방법으로도 안되면 GG겠지만, 그런 경우는 아직까진 못본것 같습니다.

2, 3번 방법이 가장 효과적이고 코드를 깔끔하게 마무리 하는 방법이겠지만, 최악의 경우 3px 때문에 페이지의 디자인이 (과격하게 말하자면) 찢기는 일이 발생합니다.

처음부터 이 현상을 예상하고 디자인을 한다면 (혹은 코딩을 한다면) 대부분의 경우 괜찮겠지만, 이미 만들어진 페이지에 버그가 나타나면 난감하겠지요.

3번 방법을 약간 응용하여 넓이를 3px 늘리고 margin-right를 -3px로 주면 디자인의 변형은 일어나지 않지만 부모 태그에 배경이라도 있으면 낭패입니다.

그래서 1번 방법이

가장 안정적으로 디자인의 변형이 없이 최소한의 노력으로 버그를 우회하는 방법인데, 어떤 경우에는 &nbsp;를 반복되는 문자만큼 늘려야 해결이 되는 경우도 있습니다.

이는 html 코딩시에 예측하기 힘든 경우가 됩니다.

글이 좀 길어졌는데, 글의 목적은,

해당 버그를 다른 분들은 어떻게 해결하는지 궁금하기도 하고,

같은 문제로 고민하는 분들께 이 글을 작은 도움이 됬으면 하는 것입니다.

부디 다른 분들의 알찬 정보가 올라오기를 간절히 바라며 두서없는 글을 마침니다.... ;;

참고 : http://www.positioniseverything.net/exp … cters.html