위즈군의 라이프로그
Reboot... Search /

Internet Explorer z-index 버그 해결 방법

2009. 3. 25. 08:40
Internet Explorer 의 style 랜더링 버그(?)와 관련된 내용입니다. "Squish the Internet Explorer Z-Index Bug"에서 지적하고 있는 내용입니다.
동일한 코드를 브라우저 별로 확인해보면 IE만 다른 모양을 보여주는 것을 확인 할 수 있습니다.
부모의 z-index 값을 absolute 속성을 지닌 자식이 영향을 받아서 의도와 다르게 표시되는 버그입니다.

예제 코드 1

Internet Explorer z-index bug



파이어폭스 3.0.6, 크롬 2 Beta, 사파리 4, 오페라 9.64, IE 8에 동일한 코드(1번 예제 코드)를 열었을 때의 모습입니다.

Internet Explorer z-index bug


z-index 값이 20인 D1i 가 D1o의 영향으로 z-index 값이 낮은 D2o에 가려지는 모습을 볼 수 있습니다.

예제 코드 2

Internet Explorer z-index bug


해결 방법은 D1o에 D2o보다 큰 z-index 값을 적용해서 해결이 가능합니다. 예제 코드 2는 D1o에 z-index 값을 할당해서 의도한 것과 같이 보이도록 한 것 입니다.
Category&Tag : [정리중/C# & .NET & Web]
위즈군의 라이프로그

Category

전체 (564)
개발 (0)
일반정보 (0)
IT 일반 (1)
일상&사진 (0)
정리중 (563)

Recent Entry

    Recent Comments

      Recent Trackbacks

        Tags

        Links

          Total:
          Today: / Yesterday:
          Powered by Tistory / Skin by 위즈 라이센스정책 rss 2.0