NARADESIGN

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


IE6 : Duplicate Characters Bug.

본문 건너 뛰기

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

W3C Develops Web Standards and Guidelines

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.

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.‘ 부분이 반복 됩니다.

W3C Develops Web Standards and Guidelines

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.

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.’ 라는 부분이 반복 됩니다.

W3C Develops Web Standards and Guidelines

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.

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.‘ 부분이 반복 됩니다.

W3C Develops Web Standards and Guidelines

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.

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

 

분류: CSS,웹 표준 | 2009년 1월 7일, 2:10 | 정찬명 | 댓글: 21개 |
트랙백URI - http://naradesign.net/wp/2009/01/07/521/trackback/

21개의 댓글이 있습니다.

  1. 정찬명의 생각…

    IE6 : Duplicate Characters Bug….

  2. 꿈트리 댓글:

    왜 이런 일이 생기는 거예욧~~~~~~~~

  3. juwon 댓글:

    모르는데욥;;
    알려주세요 왜 자꾸 이런일이 생기는거에요!!

  4. 의리 댓글:

    맥용 IE6은 아직 제가 몰라서 확인해 볼 수는 없지만.. 매번 오류로 고생하는 MS분들을 보면 안타깝기 그지 없습니다. 오류 없는 프로그램 만드는건 참 어려운가봐요.

  5. 길앞잡이 댓글:

    완전 깜짝놀랬어요 바로어제 Duplicate Characters Bug 에관해 글을 썻었거든요~
    IE6 뿐아니라 IE7에서도 생기는 버그이지요~
    저 상황에서는 display:inline 으로 해결 할수도 있는건 지금 알았어요~
    ‘d’ 클래스의 float 을 clear 해주는 방법도 있지요~

    근데 트랙백을 보냈는데 잘됬는지 모르겠어요~ 워드프레스는 처음 써봐서 ㅎㅎ

  6. 정찬명 댓글:

    매번 오류로 고생하는 것은 MS분들이 아니라 UI 개발자 들이랍니다. ㅜㅜ; MS는 IE6 버그 이제 절대로 안고쳐 줘요.

  7. 정찬명 댓글:

    길앞잡이님과 통했나봐요! ㅋㅋㅋ.
    그런데 이 버그 IE7 에서는 발생하지 않는것으로 알고 있습니다. 혹시 IE7에서 재현되는 예제가 있을까요?

    PS : 트랙백 안왔어요. ㅡㅡ; 요즈음 저도 트랙백 보내면 안나가더라구요. 혹시 WP 2.7 한국어 버전 설치하셨나요?

  8. 길앞잡이 댓글:

    네 2.7 한국어 버전인데.. 안보내지는가보네요 ;; 에고고
    IE7 에서의 발생은 실무에서 흔한경우는 아니지만 ..
    위의 예제에서 b,c,d 를 감싸고있는 a 클래스 안에 inline 속성의 엘리먼트(span, img 등등 ) 가 있으면 버그가 발생하더라구요. 예를들면

    [div class=”a”]
    [h2 class=”b”][/h2]
    (element)화면에 출력되지 않는 요소 또는 주석(/element)
    [p class=”d”][/p]
    [inline 속성의 엘리먼트][/]
    [/div]

    이렇게 하면 버그가 나타나긴 하죠 근데 사실 인라인엘리먼트를 p 또는 div 의 block 속성의 엘리먼트로 감싸면 해결되는거라서 ㅎㅎ

  9. dduck 댓글:

    올만에 글 남기네요~
    저도 IE7에서는 안 발생하는줄 알았는데, 발생하더라구요~ㅡㅡ;
    그냥 일단은 주석을 지워 해결하긴 했습니다만..

    이제 IE6은 얼른 좀 사라져줬으면 하는 바램이..

  10. 정찬명 댓글:

    아하~ 그렇군요. IE7에서도 발생할 수 있는 거군요. 결정적 증언들 두루 감사합니다. ㅎㅎㅎ.

  11. 나에 댓글:

    발생하는 경우는 드물게 봤는데
    생기는 케이스와 해결방법은 몰랐네요.

    이래서 나라디자인이 좋다니깐 (… 아부 아니예요 o<-<)

  12. Cicindela 댓글:

    Internet Explorer Duplicate Characters Bug…

    코딩을 하다보면 InterExplorer 에서 가끔 발생했던 버그다. ‘Internet ExplorerDuplicate Characters Bug’ 또는 ‘Explorer 6 Duplicate Characters Bug’ 라고 하는데 IE6 뿐 아니라 IE7에서도 나타나는 ….

  13. 황준상 댓글:

    IE7에서도 나타나나요? 몰랐어요.TT
    이런 좋은 방법이 있었다니..잘 배우고 갑니다..

    “IE6에 버그가 있으니.. 펌웨어 업데이트 하시기바랍니다.. IE7로..”

    네비랑 핸드폰 같은것들 업뎃잘하시면서..
    왜 유독 컴퓨터만..
    도통 이유를 모르겠음…

  14. 이영주 댓글:

    clear:both; 로 해결할수 있다고 하신분이 계시던데, IE에서는 클리어에 기본 폰트사이즈만큼이 먹는것 같더라구요…clear로 해결을 볼 때, 어떤 속성이 추가되어야 하는지 아시는 분 계신가요? 개인적으로 font:0px; width:0px; height:0px; 놓고
    전체에 마진과 패딩을 0으로 놓거든요..

  15. 최경환 댓글:

    감사합니다. 저 버그 땜에 고생하고 있었는데 해결 되었네요 ^^

  16. 정찬명 댓글:

    @이영주
    clear:both로 해결이 되는지는 잘 모르겠습니다만 적어주신 코드에서 line-height:0; overflow:hidden 도 필요하지 않을까 생각됩니다.

  17. 정찬명 댓글:

    @최경환
    저의 기쁨입니다. ^^

  18. 똑디 댓글:

    이 팁에서 힌트를 얻어 갑니다.^^

  19. 우진홈 댓글:

    정찬명님의 이 글은 저에게 귀한 지식의 열쇠를 제공해 주셨습니다. 늘 감사하고 고맙게 생각합니다. 개발자로서의 꿈과 소원을 꼭 이루시기 바랍니다.

  20. 익명 댓글:

    정확히 어디에 display:inline 을 삽입하는 것인지 이해가 안갑니다..
    ㅠㅠㅠㅠㅠ

  21. 정찬명 댓글:

    @익명
    ‘화면에 표시하지 않는’ { display:none; } 콘텐츠 또는 [!– 주석 –] 또는 [input type=”hidden” /] 요소 보다 먼저 등장하는 ‘float’된 요소입니다. 위 예제에서는 [h2 class=”b”] 요소가 되겠습니다.

댓글 쓰기

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

필수 아님

필수 아님