IE6가 문자를 중복으로 출력하는 버그 입니다. 이 버그는 연속된 float 요소가 존재하는 가운데 마지막으로 float된 요소가 담고 있는 문자의 끝부분을 아무 이유없이 중복으로 출력하여 화면 배치를 깨뜨리게 됩니다. 이 버그는 float된 요소 사이에 ‘화면에 표시하지 않는’ { display:none; } 콘텐츠 또는 <!-- 주석 --> 또는 <input type="hidden" /> 요소 등을 포함하고 있을 때 발생합니다. CSS를 이용한 화면배치 기법을 사용하는 사람이라면 누구나 한번쯤 만났을 법한 버그 입니다. IE6 : Duplicate Characters Bug Demo 데모 페이지를 IE6로 접근하시면 버그를 확인하실 수 있습니다.

CSS

.a { float:left; width:300px; border:1px solid #ddd; padding:3px; margin:0 20px 0 0;}
.a *{ margin:0; font-size:.9em;}
.a .b { float:left; width:290px; background:#ccc; padding:5px; /*display:inline;*/}
.a .c { display:none;}
.a .d { float:left; width:290px; background:#eee; padding:5px;}

HTML

<!-- IE6 : Duplicate Characters Bug -->
<div class="a">
    <h2 class="b">W3C Develops Web Standards and Guidelines</h2>
    <element>화면에 출력되지 않는 요소 또는 주석</element>
    <p class="d">W3C primarily pursues its mission through the creation of Web standards and guidelines. Since 1994, W3C has published more than 110 such standards, called W3C Recommendations.</p>
</div>
<!-- /IE6 : Duplicate Characters Bug -->

Expected Result

HTML [1]

‘float’된 ‘.b’와 ‘.d’ 사이에 존재하는 블럭 ‘.c’를 { display:none; } 처리 할 때 버그가 발생 합니다.

<!-- IE6 : Duplicate Characters Bug -->
<div class="a">
    <h2 class="b">W3C Develops Web Standards and Guidelines</h2>
    <p class="c">W3C primarily pursues its mission through the creation of Web standards and guidelines.</p>
    <p class="d">W3C primarily pursues its mission through the creation of Web standards and guidelines. Since 1994, W3C has published more than 110 such standards, called W3C Recommendations.</p>
</div>
<!-- /IE6 : Duplicate Characters Bug -->

HTML [1] Rendering in IE6

마지막 문장 ‘Since 1994, W3C has published more than 110 such standards, called W3C Recommendations.‘ 부분이 반복 됩니다.

HTML [2]

‘float’된 ‘.b’와 ‘.d’ 사이에  <!-- 주석 -->이 포함되어 있는 경우에도 버그가 발생 합니다.

<!-- IE6 : Duplicate Characters Bug -->
<div class="a">
    <h2 class="b">W3C Develops Web Standards and Guidelines</h2>
    <!-- IE6 : Duplicate Characters Bug -->
    <!-- IE6 : Duplicate Characters Bug -->
    <!-- IE6 : Duplicate Characters Bug -->
    <!-- IE6 : Duplicate Characters Bug -->
    <!-- IE6 : Duplicate Characters Bug -->
    <!-- IE6 : Duplicate Characters Bug -->
    <!-- IE6 : Duplicate Characters Bug -->
    <!-- IE6 : Duplicate Characters Bug -->
    <!-- IE6 : Duplicate Characters Bug -->
    <!-- IE6 : Duplicate Characters Bug -->
    <p class="d">W3C primarily pursues its mission through the creation of Web standards and guidelines. Since 1994, W3C has published more than 110 such standards, called W3C Recommendations.</p>
</div>
<!-- /IE6 : Duplicate Characters Bug -->

HTML [2] Rendering in IE6

마지막 문장 ’3C Recommendations.’ 라는 부분이 반복 됩니다.

HTML [3]

‘float’된 ‘.b’와 ‘.d’ 사이에  <input type="hidden" />이 포함되어 있는 경우에도 버그가 발생 합니다.

<!-- IE6 : Duplicate Characters Bug -->
<div class="a">
    <h2 class="b">W3C Develops Web Standards and Guidelines</h2>
    <input type="hidden" />
    <p class="d">W3C primarily pursues its mission through the creation of Web standards and guidelines. Since 1994, W3C has published more than 110 such standards, called W3C Recommendations.</p>
</div>
<!-- /IE6 : Duplicate Characters Bug -->

HTML [3] Rendering in IE6

마지막 글자 ‘s.‘ 부분이 반복 됩니다.

Solution

‘화면에 표시하지 않는’ { display:none; } 콘텐츠 또는 <!-- 주석 --> 또는 <input type="hidden" /> 요소 보다 먼저 등장하는 ‘float’된 요소에 ‘display:inline’ 속성을 추가하면 간단하게 해결됩니다. ‘float’된 요소는 자동으로 ‘display’ 속성이 ‘block’으로 바뀌는 특징이 있는데 이렇게 ‘float’된 요소에는 임의로 다른 ‘display’ 속성들 ‘inline, inline-block…’을 부여하더라도 이것들이 완전히 무시되고 고유의 ‘block’ 속성을 유지하는 특징이 있습니다. 따라서 ‘inline’ 속성을 적용하더라도 ‘block’이 갖게 되는 고유의 성질들(예:width, height 등의 속성과 값들)은 고스란히 유지 됩니다. ‘display:inline’ 속성은 그저 IE6가 더 이상 이 버그를 출력하지 않도록 하는 허수 입니다. 왜 이런일이 생기냐고 묻지는 말아 주세요. 다 아시잖아요. ^^;

Reference

• IE6 : Duplicate Characters Bug Demo – 정찬명
• Explorer 6 Duplicate Characters Bug – Position is Everything
• Duplicate characters bug without comments – quirksmode.org
• CSS2 Specification : floats – W3C 원문
• CSS2 명세 : 유동 – W3C 한국어 번역판