Jak rozwiązać pewne problemy z CSS-em w Internet Explorerze 6?

Internet Explorer 6 to zmora wszystkich webmasterów. Swobodna interpretacja standardów sieciowych zmusiła wielu projektantów stron WWW do spędzania wielu godzin na wprowadzaniu do kodu poprawek, które umożliwiłyby poprawne wyświetlanie treści w tej przeglądarce. Wszyscy chętnie by już o IE6 zapomnieli, tak jak zapomnieliśmy o większości innych aplikacji wydanych siedem lat temu, ale w wypadku IE6 nie jest to niestety możliwe. Jak pokazują wyniki Gemiusa, z przeglądarki tej wciąż korzysta w Polsce ponad 27% użytkowników.

Ten zbiór porad może pomóc webmasterom, którzy męczą się z dostosowaniem swoich stron do wymagań IE6.

Dlaczego dla elementu div przy position: absolute własność height:100% nie działa?

IE6 nie potrafi poprawnie zinterpretować tej własności, ponieważ nie jest ona ustawiona dla rodzica div. Jeśli chcesz, by height było ustawione na 100%, musisz dodać taką własność do elementów body i html.

Dlaczego użycie własności float w elemencie div podwaja rozmiar marginesów?

To prosty, choć niejasny w swojej genezie błąd. Rozwiązuje się go, dodając do elementu div własność display:inline.

Dlaczego IE6 renderuje dwukrotnie ostatni element listy li poza listą nieuporządkowaną ul?

Ten czasem zdarzający się błąd można wyeliminować, wstawiając pod koniec listy komentarz, np.:

<!– poprawka dla IE6 –>.

Dlaczego na chwilę przed załadowaniem witryny na chwilę pojawia się pozbawiona stylów wersja?

Zauważono, że zjawisko takie zachodzi podczas użycia dyrektywy @import – np.:

Dziwnym, ale skutecznym rozwiązaniem jest dostarczenie IE6 arkusza stylów dla wydruku przez umieszczenie w sekcji head strony następującej linijki:

Dlaczego podczas przewijania strony znika obrazek tła?

Zdarza się, że obrazek ustawiony jako tło strony znika w IE6 – zaobserwowano to przede wszystkim przy przewijaniu strony w pionie. Po odświeżeniu strony obrazek pojawia się ponownie, jednak trudno oczekiwać, by użytkownicy odświeżali za każdym razem stronę, kiedy zniknie im tło. Rozwiązanie polega na wstawieniu własności position: relative do reguły definiującej obrazek tła w taki oto np. sposób:

.tlo {background: url(obrazek.gif); position relative}