Polubiłem Internet Explorer 7 od samego początku - większość błędów z którymi trzeba się użerać w IE6 jest załatana co czyni pracę kodera zdecydowanie łatwiejszą.

Pojawiło się jednak parę nowych problemów, w tym takie, które nie istniały w IE6. Dwa dni temu spotkałem się z ciekawym błędem dotyczącym nadawania z-index elementom.

W wielkim skrócie, chodzi o to, że IE7 nie potrafi zmienić raz zadeklarowanego z-index dla elementu. Nie działa nawet !important.

Na przykład, mamy dwa divy, z których jeden ma zasłaniać drugi w momencie najechania na niego kursorem myszy.


div {
  ...jakiś kod... ...position: itd...
  z-index: 0;
}
div:hover {
  z-index: 1;
}

Taki zapis zadziała w większości normalnych przeglądarek, a nawet w IE6 (z whatever:hover). W IE7 natomiast nie. Element <div> w IE7 w stanie :hover wciąż ma z-index: 0.

z-index zmienić można, za pomocą Javascript. Zadziała nawet najgłupsze onomouseover="this.style.zIndex='1';".

PS. Jak się okazało inni też wiedzą o tym błędzie.