A2공간 - 도움되는 글을 쓰자

ani2life.egloos.com

포토로그 마이가든


그냥 잡담

※방명록은 따로 없고 무조건 최신글에 댓글 남기시면 됩니다. ^^

위드블로그


올블로그 올블릿


CSS로 박스모델 작업시 IE에서 이상한 현상이 발생할때 IT/웹/블로그 잡담

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는 웹 발전의 종양입니다.


트랙백

이 글과 관련된 글 쓰기 (트랙백 보내기)
TrackbackURL : http://ani2life.egloos.com/tb/1704247 [도움말]
  • Internet Explorer의 hasLayout 속성 2005/09/02 13:24 #

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

덧글

  • mage 2005/09/01 22:48 # 삭제 답글

    후후후후 저도 얼마전 터득했지요+_+
  • HFK 2007/03/28 22:16 # 삭제 답글

    저도 문제가 생겨 찾아보다가 이 글을 발견하게 되었습니다. width height 값을 지정해주니 잘 나오는군요. CSS로 코딩하다 보면 하루에도 열두번씩 빌게이를 욕하게 됩니다. CSS 패치도 안해주는 빌게이 족구하라그래! 그러면서 말이죠 :)
덧글 입력 영역