[버그] IE8에서 <ol>의 숫자가 1로만 시작하는 문제

얼마전에 발견한 아주 특이한 버그입니다.
포스팅 해야지 생각했다가 이제서야 하네요. ^^

IE8에서 <ol> 태그를 사용하면, 경우에 따라 <ol>의 숫자가 순서에 상관없이 모두 1부터 시작하는 현상이 발생합니다.

이 버그가 발생하는 조건은 이렇습니다.

  1. IE8에서 IE7 호환모드를 사용하여 페이지를 봐야한다.
  2. 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]

  1. 다른데도 똑같은 포스트가 있네요..
    일단 여기도 적어봅니다.
    저의 경우는 호환모드도, zoom도 쓴 적이 없습니다. 그리고 조금전까지 잘 나오던 것이 갑자기 ol틀도 깨지고 li는 1로만 나와서 찾아봤는데. 구글링에서...
    li에 display: list-item;라는 속성을 부여하니까 정상적으로 돌아왔습니다.
    이유도 모르고 덮어 쓰는 것 같아 찜찜하지만 그래도 해결은 됐네요.

Leave a Reply to 손상훈Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.