코딩을 하다보면 InterExplorer 에서 가끔 발생했던 버그다. ‘Internet ExplorerDuplicate Characters Bug’ 또는 ‘Explorer 6 Duplicate Characters Bug’ 라고 하는데 IE6 뿐 아니라 IE7에서도 나타나는 버그다. 말 그대로 IE 에서 글자가 복사되는 버그인데 내 생각으로는 IE 에서 가장 황당한 버그인거같다. ‘Internet Explorer Duplicate Characters Bug’ 가 발생하는 조건과 해결방법을 적어본다.
버그 발생
버그의 주된 이유는 부모 엘리먼트가 존재하고 자식 엘리먼트가 float 으로 정렬 되었을때 부모 엘리먼트 넓이에 딱맞게 떨어지는경우 와 함께 float으로 정렬된 엘리먼트 사이에 주석(<!–– text ––>) 이나 비어있는 엘리먼트(<span></span> 등등..) 가 있을경우 생기게 된다. Duplicate Characters Bug 를 구글링과 소스를 만들어서 테스트 해서 알아본 결과 보통 두가지 상황에서 버그가 발생하게 된다.
첫번째, 자식 엘리먼트들이 left 또는 right 로 가로 정렬하고 있고 Width 총 합이 부모의 엘리먼트와 Width 가 같고 자식엘리먼트 사이에 주석 또는 비어있는 엘리먼트가 있는경우 마지막 자식엘리먼트 안에있는 글자가 복사가 된다.
소스 코드
CSS
.wrap {width: 300px; border:2px solid #aaa;}
.div01 {float: left; display:inline; width: 100px;}
.div02 {float: left; display:inline; width: 100px; background:#000; color:#fff;}
.div03 {float: left; display:inline; width: 100px; background:#ddd; color:red; font-weight:bold;}
Markup
<div class = "wrap">
<div class = "div01">Float - Left</div>
<!-- comment --><!-- comment -->
<!-- comment --><!-- comment -->
<div class = "div02">Float - Right01 여기에 있는 글씨가 복사가 됩니다</div>
<div class = "div03">Float - Right02 여기에 있는 글씨가 복사로 됩니다</div>
</div>
정상적인 레이아웃의 모습
IE6 Rendering (Bug)
아래는 IE6 에서 보여지는 모습이다. 아래의 “복사로 됩니다” 가 버그로인해 생겨난것을 볼수있다.
두번째, 자식 엘리먼트들이 세로 정렬되면서 자식엘리먼트 사이에 주석 또는 비어있는 엘리먼트가 있는경우 마지막 자식 엘리먼트가 부모 엘리먼트의 Width 와 같은 경우 안에있는 글자가 복사가 된다.
소스코드
CSS
.demobox{width:250px;border:3px solid green;}
.firstfloat{float:left;width:100px;background:gray;}
.secondfloat{float:left;width:250px;border:1px solid red;}
Markup
<div class="demobox" >
<div class="firstfloat">First float</div>
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- 주석의 갯수만큼 생긴다. (주석하나당 2개 글자가 찍힌다.) -->
<!-- 링크는 복사되고 이미지는 안되는걸로봐서 텍스트 글자만 찍힘 -->
<div class="secondfloat">
<p>
Second float
<span>
In IE6 some of this text is replicated in a
"mystery block element" that starts directly
below the float. This tan colored 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.
<a href="#">Test link</a>
<img src="images/pinecone3.jpg" alt="" />
</span>
</p>
</div> <!-- End of second float -->
</div> <!-- End of .demobox -->
소스 참조 - Explorer 6 Duplicate Characters Bug
정상적인 레이아웃의 모습
IE6 Rendering (Bug)
IE6 에서 보여지는 모습이다. 아래의 “een here. Test link” 가 버그로인해 생겨난것을 볼수있다.
IE7 에서의 Duplicate Characters Bug
위의 소스 로 IE7에서는 버그가 나타나지 않는다. 그러나 Duplicate Characters Bug 가 IE7에서도 생기는 경우가 있다. 발생하는 요건은 위의 조건에서 부모의 엘리먼트안에 인라인 엘리먼트(display 가 inline 속성인 내용) 가 들어있을때 나타나게 된다. 아래의 소스코드는 위 예제의 Markup에서 IE7에서 나타나는 현상을 보여주는 예이다.
IE7 Duplicate Characters Bug Markup
Markup Example01
<div class = "wrap">
<div class = "div01">Float - Left</div>
<!-- comment --><!-- comment -->
<!-- comment --><!-- comment -->
<div class = "div02">Float - Right01 여기에 있는 글씨가 복사가 됩니다</div>
<div class = "div03">Float - Right02 여기에 있는 글씨가 복사로 됩니다</div>
<span>Test Text</span>
</div>
Markup Example02
<div class="demobox" >
<div class="firstfloat">First float</div>
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- 주석의 갯수만큼 생긴다. (주석하나당 2개 글자가 찍힌다.) -->
<!-- 링크는 복사되고 이미지는 안되는걸로봐서 텍스트 글자만 찍힘 -->
<div class="secondfloat">
<p>
Second float
<span>
In IE6 some of this text is replicated in a
"mystery block element" that starts directly
below the float. This tan colored 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.
<a href="#">Test link</a>
<img src="images/pinecone3.jpg" alt="" />
</span>
</p>
</div> <!-- End of second float -->
<span>Test Text</span>
</div> <!-- End of .demobox -->
IE7 Rendering (Bug)
아래 그림에서 보여진거 와 같이 부모의 Div 에 “Test Text” 라고 span 엘리먼트가 들어가있으면 버그가 발생한다. (span 뿐 아니라 img 등 인라인속성 모두 버그 발생)
해결 방법 및 결론
해결방법이 여러가지다. 일단 부모의 엘리먼트가 자식의 엘리먼트에 딱맞기 때문에 Width 를 3px 이상 늘리던가 마지막 버그가 발생하는 자식 엘리먼트를 margin 을 -3px 이상 주는 방법이다. 또 다른 방법은 마지막 엘리먼트의 float을 클리어 시켜주는 방법이 있다. 마지막 엘리먼트 다음에 <br style=”clear:both”> 이런식으로 해결하는거다. 주석으로 인해 버그가 생겼을경우는 <!–[if !IE]>주석<![endif]–> 이런식으로 Conditional Comments 를 사용해도된다. 그리고 첫번째 예제의 가로 정렬했을때는 복사되지않는 엘리먼트에 background 속성을 지정하거나 복사되는 엘리먼트에 position:relative 를 주면 텍스트만 없앨수잇다. 그리고 이건 제일 단순한 방법이긴 하지만 그리 추천하지 않는 방법이 있는데 그건 복사되는 부분을 공백으로 복사되는부분이 나타나지 않을때까지 공백을 지정하는거다. 또 여기서 재미있는 부분이 있는데, 복사되는 텍스트는 원래 가지고있는 속성(굵기, 폰트, 색상 등등) 과 링크 (a Element)를 그대로 가져온다. 그러나 img 는 복사가 되지 않는다.
여러가지 버그 해결 방법이 있지만 내가 생각하기에 제일 좋은방법은 아에 버그가 나타나지 않은 환경의 CSS 를 작성하는거다. 주석은 여러개 붙여서 사용하지 않는게 좋고, float 과 float 사이에는 아무것도 없는 인라인 속성의 엘리먼트가 있는것은 좋지 않은거 같다. 코딩을 할때는 언제나 이렇게 IE 의 버그 를 염두하고 작업해야한다. 특히 Duplicate Characters Bug Characters Bug 는 막상 코딩할때 눈에 안띄어도 유지보수 해야할때 나중에서야 알게되는 경우가 많다. (텍스트가 길어지거나, 주석을 추가해서 생기는경우 등등) 항상 버그의 유무를 체크하며 코딩하고 테스트 해보자.
참조
- Explorer 6 Duplicate Characters Bug - www.positioniseverything.net
- Explorer 6 Duplicate Characters Bug - veerle’s Blog
- IE Duplicate Characters Bug - 마지막 문자 복사 버그 - CSS Design Korea
Display:inline 을 통한 해결
첫 번째 예제같은 float 이 가로로 정렬 되었을때를 제외하고 두 번째 예제 같은 경우 display:inline 으로 깔끔하게 해결하는 방법이 있었다. 찬명님의 블로그를 보고 알게됬다. 그리고 www.positioniseverything.net 에서 아래에 나온 내용이였는데 좀더 꼼꼼하게 읽어보고 글을 써야겠다.