2005년 09월 01일
CSS로 박스모델 작업시 IE에서 이상한 현상이 발생할때
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는 웹 발전의 종양입니다.

by -A2- | 2005/09/01 21:59 | | 트랙백(1) | 덧글(2)
트랙백 주소 : http://ani2life.egloos.com/tb/1704247
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
Tracked from Blog of Hyeo.. at 2005/09/02 13:24

제목 : Internet Explorer의 hasLayout..
CSS를 처음 접하는 분들이 가장 흔하게 일으키는 실수가 Internet Explorer에서 CSS를 테스트 해 본다는 것입니다. 그러고서 Firefox에서 자신의 작업물을 보고 실망을 하게 되거나 CSS에 대한 불신을 ......more

Commented by mage at 2005/09/01 22:48
후후후후 저도 얼마전 터득했지요+_+
Commented by HFK at 2007/03/28 22:16
저도 문제가 생겨 찾아보다가 이 글을 발견하게 되었습니다. width height 값을 지정해주니 잘 나오는군요. CSS로 코딩하다 보면 하루에도 열두번씩 빌게이를 욕하게 됩니다. CSS 패치도 안해주는 빌게이 족구하라그래! 그러면서 말이죠 :)

:         :

:

비공개 덧글



<< 이전 페이지 | 다음 페이지 >>