Każdy z tych, którzy kiedykolwiek musieli zrobić bardziej zaawansowaną stronę w pełni obsługiwaną w IE6 dobrze zna ogrom kłopotów z jakimi musi sobie poradzić, aby strona poprawnie się wyświetliła. Większość z nich związana jest z brakiem obsługi przezroczystości obrazków PNG. Problemy też czasem sprawia napisanie poprawnego kodu Javascript, który działałby w IE6 dokładnie w ten sam sposób co na nowszych przeglądarkach. Tworząc skrypty map Google wielokrotnie zachodziłem w głowę dlaczego nie działają one na IE6, ale tym razem nie o tym.

Jeszcze do niedawna tworzenie dynamicznych, dobrze wyglądających stron w IE6 polegało na dodawaniu specjalnych arkuszy stylów, obudowywanie obrazków dodatkowymi elementami blokowymi, które nierzadko burzyły porządek na stronie i przyprawiały o ból głowy.

W ostatnim czasie pojawiły się na szczęście skrypty, które wystarczy dodać do strony i automatycznie wykrywają one wszystkie obrazki i stosują do nich okrętki na przezroczystość. Pojawiło się ich kilka, przetestowaliśmy je i uznaliśmy, że do większości zastosowań najlepiej nadaje się DD_belatedPNG, która wykorzystuje VML, do przerysowywania obrazków.

Jego użycie ogranicza się w zasadzie do dodania skryptu w komentarzach warunkowych dla IE6 i zdefiniowanie selektorów CSS elementów, na których ma zadziałać, ale także wskazać wszystkie obrazki jakie występują na stronie, przykładowo:

O ile strona z zastosowanym fixem ładuje się szybko i wszystkie obrazki wyglądają prawidłowo, to jednak gdy dodałem na taką stronę mapę Google przestała ona działać. Mapa zainicjowała się prawidłowo, menu pokazało się, jednak żadne obrazki mapy nie zostały załadowane, a mapa nie pokazała żadnego błędu.



Po krótkim sprawdzeniu skryptów obsługi mapy okazało się, że z mapą jest wszystko w porządku, jednak problem tkwi właśnie w zastosowanym na stronie wspomnianym pngfixie. Zastosowanie fixa do wszystkich obrazków na stronie spowodowało zaprzestanie wyświetlania mapy na stronie.

Wynika to z tego, że Google stosuje własne algorytmy obsługi przezroczystości na mapie w IE6 w postaci filtru Microsoftowego AlphaImageLoader używanego dla każdego obrazka:

function Nk(a,b,c){ 
   a.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizi 
ngMethod="+(c?"scale":"crop")+',src="'+Sk(b)+'")' 
  }

Zastosowanie dodatkowo na już przekształconym obrazku po raz kolejny pngFixa DD_ belatedPNG powoduje zaprzestanie jego wyświetlania. Jest to ewidentnie konflikt obu bibliotek.

Na szczęście jest na to sposób. Wystarczy nie stosować pngfixa do wszystkich obrazków na stronie i zamiast deklarować ogólny selektor ‘body img’, stosować bardziej szczegółowe selektory elementów, w których wiemy, że nie będziemy mieli mapy Google.

Eksperyment potwierdziło usunięcie jednej linijki kodu:

DD_belatedPNG.fix("body img");

Mapa natychmiast pojawiła się na stronie :)



Warto o tym pamiętać tworząc strony w IE6, jeśli kiedykolwiek będziemy chcieli mieć na niej mapę Google.