얼마전에 발견한 아주 특이한 버그입니다.
포스팅 해야지 생각했다가 이제서야 하네요. ^^
IE8에서 <ol> 태그를 사용하면, 경우에 따라 <ol>의 숫자가 순서에 상관없이 모두 1부터 시작하는 현상이 발생합니다.
이 버그가 발생하는 조건은 이렇습니다.
- IE8에서 IE7 호환모드를 사용하여 페이지를 봐야한다.
- CSS에서 <ol>에 zoom:1 을 설정한다.
위 조건이 갖추어지면 DTD나 렌더링 모드에 상관없이 모든 목록의 숫자가 1부터 시작하는 버그가 발생합니다. 처음에는 목록 스타일이나 여백의 문제인줄 알고 그 부분만 한참동안 찾았는데, 알고 보니 이 부분이 문제더군요. 간단하게 다음과 같은 코드로 테스트 해볼 수 있습니다(DTD는 일부러 포함하지 않았습니다).
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>IE Bug</title>
<style type="text/css">ol { zoom:1; }</style>
</head>
<body>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</body>
</html>해결책은 위에서 말씀드린 2가지 조건 중 하나라도 만족시키지 못하도록 하면 됩니다. 즉, 호환 모드가 아니거나 zoom 스타일을 <ol>에 적용하지 않는 것이죠.
IE는 생각지도 못한 곳에서 저를 자주 놀래키네요. ^^
추가 // 이 문제는 IE6에서도 발견된다는 보고가 있습니다.
[adsense]
행복한고니의 생각...
IE8에서 의 숫자가 사라지는 버그 혹시 같은 문제 겪어보신 분 계시나요? ^^...
음.. 혹시 고니님 프로필 페이지에 내용보면 1 로 표시되는데..
그게 이건가요?^^;
그거 맞습니다. ^^;;
다른데도 똑같은 포스트가 있네요..
일단 여기도 적어봅니다.
저의 경우는 호환모드도, zoom도 쓴 적이 없습니다. 그리고 조금전까지 잘 나오던 것이 갑자기 ol틀도 깨지고 li는 1로만 나와서 찾아봤는데. 구글링에서...
li에 display: list-item;라는 속성을 부여하니까 정상적으로 돌아왔습니다.
이유도 모르고 덮어 쓰는 것 같아 찜찜하지만 그래도 해결은 됐네요.
똑같은 포스트 보니까 출처가 여기로 밝혀져 있네요.