Czasy robienia stron pod IE 6 są już szczęśliwie za nami, więc większość koderów może rozłożyć skrzydła i zacząć choćby używać pseudo klasy :hover na każdym elemencie. Z odejściem do lamusa każdej kolejnej przeglądarki IE będziemy mogli w standardzie używać coraz większego zestawu ciekawostek CSS. O ile nie pamiętam kiedy ostatnio poprawiałem jakiś błąd pod IE 8, o tyle pod IE 7 zdarza się to przy każdym zleceniu. Szacunkowo jeszcze przez około 1.5 roku będzie potrzeba walki z IE 7, więc warto się dowiedzieć jak się nie męczyć :-)

Ostatnio robię dość duży projekt składający się z ponad 30 różnych podstron, więc możliwości walki z IE7 mam aż nadto. Oczywiście byłem na to gotowy więc od razu zaopatrzyłem się w wpis z warunkowym komentarzem:

<!--[if lte IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->

Znając magiczne właściwości zoom: 1; konsekwentnie ją dodawałem (w stylach dla IE) dla elementów, które się sypały i osiągnąłem coś takiego:

.box, box > div, .actionBar,div.singleRes .result,
div.forum .buttons, .action, .result,
.collection, .borders3{
    zoom: 1;
}

Gdy dziś w połowie projektu odkryłem, że na hoverach cała strona tańczy pod IE 7, to troszkę się zirytowałem. Mimo, że konsekwentnie testowałem każdą podstronę, to takie coś wyszło nagle. Miałem już kiedyś ochotę to zrobić, ale trochę się obawiałem. Tym razem jednak nic mnie nie powstrzymało i dodałem:

*{
    zoom: 1;
}

Efekt? Jak ręką odjął :-) Wszystko działa doskonale!

Co robi zoom: 1; ?

zoom: 1; powoduje, że elementy dostają legendarne hasLayout co automatycznie sprawia, że IE zaczyna poprawnie wyliczać wszelkie wartości naszych ostylowanych elementów. Dzięki temu nie ma wszelakich podwójnych paddingów, marginesów, żadnych efektów peek a boo(znikającego contentu, borderów), źle wyliczanych pozycji absolutnych… Ogólnie masa błędów automatycznie znika :-) Zostają jeszcze problemy z błędną implementacją float (flotowanie w prawo w elemencie floatującym w lewo ;-) ), ale to są rzeczy które zawsze można załatwić na kilka sposobów i to dość łatwych.

Dlaczego bałem się stosować zoom: 1 z gwiazdką?

Obawiałem się może naprawić za dużo :-) Póki co nie stwierdziłem efektów ubocznych tej magicznej pigułki, ale używajcie tego na własną odpowiedzialność, bo nie było jeszcze testowane na ludziach:-) W razie problemów można zastosować wyjątki od reguły w następujący sposób

*{
    zoom: 1;
}
dl dd{
    zoom: 0;
}

Miłego kodowania!