css로 열심히 작업하면서 불여우에서 보면 멀쩡한데 IE에서 오류를 일으킬 때가 가끔 있습니다.
처음에는 무척 많았는데 이제는 알아서 IE의 오류를 피해다니는 노하우가 생겼습니다. :)
최근에 절실히 느낀 IE의 버그 대처방법을 소개하겠습니다.
<div style="width: 200px;">
<div>내부상자</div>
<div>
위와 같은 코드가 있을때 '내부상자'의 크기는 당연히 200px 입니다.
평소에는 IE도 별로 문제가 없습니다. 그런데 '내부상자'에 position: relative; 속성을 주고 '내부상자'의 특정 객체에 position: absolute; 속성을 줘서 위치를 잡으려고 할때 외부 div에 패딩을 주면 '내부상자'가 영향을 받습니다. ㅡㅡ;
먼산~ 을 한번 바라보게 만드는 버그입니다.
이 버그를 잡는 방법은 당연히 '내부상자'의 크기가 200px 라도 '내부상자'의 style에 width: 200px; 라고 명시해줘야 됩니다.
꼭 이 경우만이 아니라 다른 비슷한 경우가 존재 할 수 있습니다.
css로 박스모델 작업시 IE가 알 수 없는 버그를 일으키면 width나 height를 넣어보세요. 해결될 수도 있습니다.
ps. IE 때문에 웹표준과 상관없이 쓸데없는 버그를 버그로 잡는 핵이나 공부하고 있는 이 시간이 아깝군요. 역시 IE는 웹 발전의 종양입니다.