스킨을 제작하다보니 어지간한 ie 버그는 알고 있어 애초에 피하는 형식으로 작업을 합니다.

이번에 드롭다운 메뉴를 만들다가 ie7에만 유독 버그가 있어 이렇게 정보를 공유합니다.


z-index 는 우선 가장 먼저 알아야할 점은 가장 위 부모의 index 의 크기 차이로 결정이 납니다.

즉 같은 형제끼리 header 와 main 이 있다고 하면 ..

.header { z-index: 2; }
.main { z-index: 1; }

이처럼 하면 정상적으로 main이 header 위에 올수 없습니다.

그런데 여기에 position:absolute 가 온다거나 하면 좀 달라질수 있습니다.

또 리스트인 ul li 가 들어가면 또 달라집니다.


역시 머리아픈 ie.....


여기서는 position의 문제. ul li 의 문제는 넘어가고, z-index 의 순서에 대해서만 이야기 합니다.

버그 이야기하면 끝이 없어요....


문제점은 다 해결이 가능한데..... 위에서 말한 z-index 가 도무지 말을듣지 않았습니다. 

심지어는 아주 무식한 방법으로 ie7에서만 작성되는 css를 볼려고 계층구도 전부에게 z-index 를 줘보았습니다.





위 사진에서 #header 과 #main 은 형제관계입니다.

#header 에 z-index:18을 줬지만 #main 의 z-index:1을 넘지못합니다.


아래 사진을 보시면 .blogMenu ul ul ul a 가 #main 아래 위치하고 있는것을 볼 수 있습니다.

아래사진은 ie7 입니다.




ie8까지 정상적으로 나오나 ie7에서 이렇듯 비정상적으로 나옵니다.

하루종일 다른것 못하고 이거 해결책만 찿다가 결국 찾았습니다.


정말이지 ie7 빨리 없어져야 합니다.

ie9까지 몽창.....

익스가 웹표준 브라우져가 빨리 됐으면 하는 바람이 간절합니다. ㅎㅎㅎㅎㅎㅎ


해결책 최상단의 #main { z-index:1; } 을 { z-index:-1; } 로 하니까 되더군요.....

왜 같은 형제끼리 index 의 순서에 의해 되는데....이건 마이너스까지 줘야하는지 도무지 모르겠네요.....


여하튼 여러분들중에서 저와 같은 고초를 겪는분들은 같은 형제에 z-indes 값에 마이너스를 줘보세요.....