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

Internet Explorer z-index 버그 해결 방법

2009.03.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 값을 할당해서 의도한 것과 같이 보이도록 한 것 입니다.
신고
mkyoon 2009.03.25 09:53 신고 E / R
이런 엄청난 버그가 있었다니..
부모에게 강하게 종속되는 경향은 느끼고 있었지만
여태 IE와 씨름하면서 그냥 지나쳤던 부분이에요+_+
자세한 테스트와 해결방법 저도 배우고 갑니다^^
위즈 2009.03.25 13:52 신고 E
즐거운 하루되세요.^^
50ndd1n6 2011.05.01 09:36 신고 E / R
이거 때문에 고생이시구나. 문제가 되는 것이 z-index 초기값의 auto 처리방법때문에 생기는 일이어서, auto 아닌 값을 직접 값을 설정해주면 모두 해결이 되는데요. 이렇게 해결하면 크게 어렵지 않은 것인데요.

그럼에도 혼란 스럽다면 이유는 하나죠. 상속 관계에서 z-index를 절대값 처럼 보는 문제에요. 그 안에서 자식에 있는 z-index는 자기와 같은 동등한 것과에서 사용되는 것 뿐이지, 자기의 z-index 값이 양수 백만이든 음수 백만이든, 부모 요소가 다른 동위 요소에서 자기의 z-index 값만 사용하며, 위치를 정하고 자식은 그저 z-index는 계산에 생각할 필요도 없이 부모에 딸려 들어가요.

위와 같이 처리만 하면 곤란한 문제가 있는데, auto란 값이 필요하고 게다가 초기값이죠. auto값이란 부모에 종속되지 않고, 그저 부모는 하나의 개념적인 블록으로 자식을 가둘 뿐이고, 자기의 z-index는 0인 값인 것 처럼 다른 요소와 비교를 하는데 사용되어요. 이때 중요한 것이 자식은 자기의 z-index 값을 가지고 자신의 부모와 동등한 위치에 있는 요소들과 z-index를 비교하며 싸웁니다. 자신의 부모들이 계속해서 auto이면 위로 자꾸 올라가겠지요.

IE 버그 문제는 auto에서 그냥 자신을 0으로 처리하고 자식에 대해 이런 효과를 주지 않아서 생기는 문제에요. z-index의 auto값의 이러한 효과를 대부분 필요하지 않거나 아시고 사용하는 사람이 적기에, 초기값을 그냥 0으로 했으면 좀 고생이 덜하고 오해도 덜하지 않을까란 생각이 들어요.
위즈 2011.05.02 21:21 신고 E
그게 자식요소의 position이 absolute라는 점에서 문제입니다.
css 표준을 정확하게 반영하지 못하고 있는 구조의 문제겠죠.
그저 빨리 IE 하위 버전을 사용자가 줄어들었으면 하는 바램입니다.
즐거운 하루 되세요.
50ndd1n6 2013.10.19 17:23 신고 E
이제서야 보고 다시 답글을 다네요. 해당 z-ndex 부분은 CSS 명세가 당시 나왔을때 불명확하게 있던 부분입니다. 브라우저 탓하기에는 애매했던 것이에요. CSS 2.1이 초안으로 다시 역주행하다가 기껏 2010년이 되어서야 RC가 되었고 이 부분이 다시 쓰여졌어요.
jhb 2012.07.15 05:12 신고 E / R
크롬에선 되는데 ie8에서 안되면 어떻게 봐야될까 ㅠㅠㅠ
Name : Password : Blog : ( )

위즈군의 라이프로그

Category

전체 (569)
개발 (0)
정보 (0)
일상 (0)
정리중 (569)
Total:2,055,902
Today:11 / Yesterday:260
Daum 코드
Powered by Tistory / Skin by 위즈 / Copyright Click Here 라이센스정책 rss 2.0