IE 6.0의 버그들
1. letter-spacing 문제
자간을 줄이는 CSS 속성인 letter-spacing을 -1px 정도로 주면 글자가 다닥다닥 붙어 정돈되고 아기자기한 느낌을 준다. 이 속성을 썼을때 일어날 수 있는 문제중 잘 알려진 것 중 하나는 특정한 코드와 섞여있을때 br 태그를 두번 입력해야 줄바꿈이 되는 문제가 있다. 그리고 어제 gendoh님이 발견한 새로운 버그는 꽤 재밌다.
<html>
<head>
<style type="text/css">
body { letter-spacing: -1px; }
</style>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<div style="float: left">A</div>B
</body>
</html>
위에 줄바꿈이 주루룩 있으면 저 코드에서 B가 A를 잡아먹어버린다. div 태그 안에 이미지나 기타 등등 아무리 거대한놈이 있어도 화면에는 표시되지 않는다. 더 재밌는건 위에 br 태그의 개수를 늘이거나 줄이면 이 버그는 사라진다. tistory 새 스킨 QA 과정에서 우연히도 엔터를 35번 눌러 버그를 발견한 gendoh님께 박수;
2. 잘못된 ul 태그 렌더링 문제
이건 HTML이 잘못된 문법으로 작성된 거지만 IE의 처리가 깔끔하지 못했다. 역시 tistory 새 스킨에서 ul/li 태그로 구성한 코멘트 부분이 스크롤 할때마다 배경색이 깨져버리는 문제가 있었는데 처음엔 li 태그의 padding 때문인줄 알았지만 나중에 보니 근본적인 원인은 잘못 들어간 a 태그때문에 생긴 문제였다. (어제는 li 태그의 아래쪽 padding 값을 0으로 했더니 문제가 사라져서 그냥 넘어갔음;)
<html>
<head>
<style type="text/css">
li { padding-top: 8px; background-color: #aaa; }
</style>
</head>
<body>
<ul>
<a id="anchorHere"></a>
<li><div>-_-</div></li>
<a id="anchorHere"></a>
<li><div>-_-</div></li>
...
<a id="anchorHere"></a>
<li><div>-_-</div></li>
</ul>
</body>
</html>
위 예제 페이지를 열어서 스크롤바를 잡고 위아래로 천천히 이동해보면 li 태그의 배경색이 찢어지는 현상을 볼 수 있다. 이 현상은 브라우저 크기를 작게 할 수록, 스크롤 속도를 느리게 할 수록 잘 볼 수 있다.
3. design mode scrolling 문제
태터툴즈 위지윅 에디터에서 아래쪽 커서키를 계속 누르면 화면 끝에서 더이상 스크롤 되지 않는 버그가 있었다. 이렇게 브라우저가 후져서 생기는 버그는 여러가지 원인이 누적돼 하나의 현상으로 터져버리는 경우가 많은데 이 경우는 에디터 영역의 줄간격을 150%에서 163%로 바꿔서 해결했다. 비슷한 상황을 간단히 재현해보면 아래와같은 경우도 있다.
<html>
<head>
<style type="text/css">
div { float: left; width: 200px; }
iframe { width: 100%; }
</style>
<script type="text/javascript">
window.onload = function() {
var document1 = document.getElementById("Frame1").contentWindow.document;
var document2 = document.getElementById("Frame2").contentWindow.document;
document1.designMode = document2.designMode = "on";
var html = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">body { font: 12px/1.5 Dotum, Sans-serif; }<\/style><\/head><body>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>11<br/>12<br/>13<br/>14<br/>15<br/>16<br/>17<br/>18<br/>19<br/>20<br/><\/body><\/html>';
document1.open("text/html", "replace");
document1.write(html);
document1.close();
document2.open("text/html", "replace");
document2.write(html);
document2.close();
}
</script>
</head>
<body>
<div>
<iframe id="Frame1"></iframe>
</div>
<div>
<iframe id="Frame2"></iframe>
<table style="margin-top: 3px"></table>
</div>
</body>
</html>
예제에 보이는 두개의 iframe중 첫번째 프레임은 정상이고, 두번째 프레임은 아래 방향키를 계속 눌러보면 스크롤되지 않고 화면 끝에서 첫번째 줄로 커서가 점프한다-_- 해결하려면 iframe 아래에 있는 테이블의 위쪽 마진을 없애거나 줄간격을 바꾸거나 iframe document의 DOCTYPE을 제거하는 등의 다양한 방법이 있다.
4. IE를 다운시키는 코드
열기만 해도 IE가 다운되는 HTML 코드가 있다. 내가 알고 있는건 아래 두가지인데,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<table style="table-layout: fixed">
<col width="10"></col>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<table>
<tr>
<td>
<table style="table-layout: fixed">
<col width="10"></col>
<col width="10"></col>
</table>
</td>
</tr>
</table>
</body>
</html>
예전에 tattertools.com 메인 페이지는 두번째 코드가 포함돼 있었다. 가운데 있는 테이블에 내용이 반복해서 들어가게 되는데 어느날 DB가 살짝 맛이 가서 <tr>...</tr> 부분이 쏙 빠져버려 위와 같은 모습이 돼버렸다. 당연히 tattertools.com을 방문하는 대부분의 사람은 브라우저가 죽어버리는 경험을 할 수밖에 없었다; 궁금하신 분은 작업중이던거 다 저장하고 아래의 링크를 눌러보면 된다.
View example1 View example2 (주의 : 브라우저가 다운될 수 있습니다)
'컴퓨터 얘기 > 프로그래밍' 카테고리의 다른 글
| Crizin.HTTPRequest.php (8) | 2007/02/03 |
|---|---|
| preg 계열 함수들의 버그? (10) | 2006/08/21 |
| IE 6.0의 버그들 (7) | 2006/08/11 |
| 태터툴즈 1.0.5 플러그인 (58) | 2006/05/09 |
| 태터툴즈 방문자 그래프 플러그인 (9) | 2006/03/22 |
| 태터툴즈에 FTP로 첨부파일 올리기 (11) | 2005/10/04 |
