주제: IE Duplicate Characters Bug - 마지막 문자 복사 버그
html로 사이트를 코딩(?) 하다보면 마지막 문자열이 복사되는 현상인 IE Duplicate Characters Bug 가 종종 발생합니다.
간단한 예제 코드는 다음과 같은데
<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"> </div> 같은 코드를 사용하는 법. (iefix 는 화면에 보이지 않게 하는 style)
2. 마지막 float 부분에 margin-right를 -3px 이상 추가하는 법.
3. 부모 태그의 넓이를 3px 이상 늘리는 법.
이렇게 요약이 되더군요.
위 3가지 방법으로도 안되면 GG겠지만, 그런 경우는 아직까진 못본것 같습니다.
2, 3번 방법이 가장 효과적이고 코드를 깔끔하게 마무리 하는 방법이겠지만, 최악의 경우 3px 때문에 페이지의 디자인이 (과격하게 말하자면) 찢기는 일이 발생합니다.
처음부터 이 현상을 예상하고 디자인을 한다면 (혹은 코딩을 한다면) 대부분의 경우 괜찮겠지만, 이미 만들어진 페이지에 버그가 나타나면 난감하겠지요.
3번 방법을 약간 응용하여 넓이를 3px 늘리고 margin-right를 -3px로 주면 디자인의 변형은 일어나지 않지만 부모 태그에 배경이라도 있으면 낭패입니다.
그래서 1번 방법이
가장 안정적으로 디자인의 변형이 없이 최소한의 노력으로 버그를 우회하는 방법인데, 어떤 경우에는 를 반복되는 문자만큼 늘려야 해결이 되는 경우도 있습니다.
이는 html 코딩시에 예측하기 힘든 경우가 됩니다.
글이 좀 길어졌는데, 글의 목적은,
해당 버그를 다른 분들은 어떻게 해결하는지 궁금하기도 하고,
같은 문제로 고민하는 분들께 이 글을 작은 도움이 됬으면 하는 것입니다.
부디 다른 분들의 알찬 정보가 올라오기를 간절히 바라며 두서없는 글을 마침니다.... ;;
참고 : http://www.positioniseverything.net/exp … cters.html
최종 편집 : kikiroki (2007-08-31 06:20 PM)
if ($운영체제 == '윈도우' && $브라우저 == '익스플로러') return '버그';
else return '비호환';
}
