아래는 CSS를 적용하면서, 꼭 한두 번씩은 개발자의 골치를 썩게 하였을 잘 알려진 IE 6의 버그들을 모아보았다.

Doubled Float-Margin Bug

요넘은 모든 float된 요소들에서 나타나는데, 만약 float된 방향과 같은 쪽에 margin 값을 주어서(float:left된 박스에 margin-left 값을 준 경우) 이 요소의 margin이 float된 박스를 포함하고 있는 부모 요소와 맞부딪칠 경우, 그 너비가 두 배로 늘어나는 현상. (같이 float된 요소들 중에 첫 번째 요소에서만 나타난다.)

해결책으로는, float된 박스에 display:inline을 선언해 주면 된다.
좀 더 자세한 설명은 IE Doubled Float-Margin Bug – CSS fixes and workarounds 참고.

Three-Pixel Jog

이놈은 서로 연결되어 있는 float된 요소들 사이에서 나타나는 놈으로, 잘 드러나지 않을 수도 있다. 이것은 float된 놈과 다음에 있는 inline 요소들 사이에 3 pixels 값의 공간을 추가해 버리는 버그인데, inline 요소들이 block 요소에 둘러싸여 있어도 발생한다.

다행히 쉬운 해결책으로, float된 박스와 옆에 붙어있는 박스의 각기 서로의 이웃한 margin 값을 -3px 빼주면 된다. (물론 다른 브라우저들에 영향을 미치지 않으려면 IE hacks 만을 위한 css 파일에 따로 지정해 놓아야 한다.)
추가 참고 글 – IE6 Three Pixel Gap

Absolute Positioning in a Relative Container

일반적으로, position:absolute으로 위치한 요소가 기본 static 위치가 아닌 다르게 지정된 위치(position:relative 혹은 position:absolute)를 가지는 부모 안에 포함되어 있을 경우, 브라우저 창의 왼쪽 구석이 아닌, 부모 요소의 위치를 기준으로 한 상대적 위치 값을 가지게 되는데, IE 6에서는 부모 요소에 height 값이 안 주어져 있을 경우에는 그냥 무조건 페이지 모서리를 기준으로 위치가 정해져 버린다.

해결책은, absolute으로 위치한 요소를 감싸고 있는 부모 요소에 height:1% 혹은 zoom:1 값을 지정해 주면 된다. 이렇게 하면, absolute하게 위치한 박스의 위치가 올바르게 적용되고, 또 부모 요소가 자식 요소들을 모두 둘러쌀 수 있도록 늘어나게 된다.
참고 글 – Absolutely Buggy II

Whitespace Bug

주로 ul로 메뉴를 작성할 때 나타나는 벌레로, 메뉴 사이에 의도하지 않은 빈 공백이 생기는 버그.

예를 들어 특정 너비의 세로 메뉴를 아래와 같이 짰을 경우,

<ul>
  <li><a href="page1.html">Link 1</a></li>
  <li><a href="page2.html">Link 2</a></li>
  <li><a href="page3.html">Link 3</a></li>
  <li><a href="page4.html">Link 4</a></li>
  <li><a href="page5.html">Link 5</a></li>
</ul>

IE 6에서는 코드의 li 사이에 있는 빈 공백을 페이지에도 그대로 표시해 버린다.

물론, 해결 방법으로 코드에 있는 li 사이의 공백들을 없애주면 되지만, 코드 스타일을 흐트러뜨리지 않으려면, 이젠 눈에 익은 다음과 같은 꼼수를 써주면 된다.

ul li a { height: 1%; }

더는 종잡을 수 없는 벌레들이 남기고 간 오물들로 당황하는 날이 오지 말기를 바라지만, 당장은 상황에 따라 제대로 대처할 수 있는 해결책들을 숙지해 놓는 수 밖에 없을 것이다. 😕

관련된 주제의 글

• Unit PNG Fix (4)
• 화면 가운데 위치하는 가로 메뉴 (0)
• TextMate의 CSS bundle에 포함된 IE hacks (0)
• IE7.js가 알파 딱지를 떼다. (0)
• IE 7에서의 웹 표준과 CSS 지원 정도 (0)