Problemy z Internet Explorer 6

W ostatnim czasie przy tworzeniu ciekawszych i bardziej zaawansowanych graficznie stron internetowych natrafiam na dość mocno meczące problemy z dostosowaniem wyglądu danego szablonu pod przeglądarkę MS Internet Explorer 6. Ten przestarzały twór Microsoftu przysparza mi sporo pracy i nerwów - czego można by uniknąć dzięki choć odrobinie wyobraźni ze strony przeciętnych userów ( czy nie lepiej zadbać o swoje bezpieczeństwo w necie i zainstalować coś porządnego: FF, Opera czy chociażby nowszą wersje molocha z Redmond - IE8 ?! ).

W tym artykule opisze kilka problemów jakie regularnie napotykam przy tworzeniu witryn web.

Problem #1 - SWFObject

Do osadzania animacji flash używam skryptu SWFObject (ostatnia wersja to: v2.2). Wszędzie działa znakomicie (no prawie, ale o tym później), oprócz "oczywistej oczywistości" czyli IE6. Zamieszczając ten skrypt strona w IE po prostu się nie otwiera i w zamian IE6 wyrzuca błąd "Internet Explorer nie może otworzyć miejsca docelowego i operacja zostaje przerwana."

Problem ten został opisany na jednym z blogów - SWFObject/Internet Explorer conflict and workaround. Oh yes, and please stop using IE!

Proponowane przez autora blogu rozwiązanie polega na dopisaniu atrybutu defer="defer"</strong></em> w znaczniku <script></script>. Faktycznie częściowo taki patent "daje radę", ale jest to tylko ominięcie zasadniczego problemu :( Strona w IE6 co prawda ładuje się, ale flash już nie odpala (w IE6 i innych, np. FF), a konsola JS wskazuje błąd <strong><em>"swfobject is not defined"</em></strong>. Równie dobrze można po prostu wyrzucić ten skrypt SWFObject z kodu strony...</p> <p>Tak czy inaczej problem wymaga trochę więcej czasu - możliwe, że w testowanym projekcie ładowane są jeszcze biblioteki jQuery 1.4.2 oraz MooTools, co "gryzie się" z swfobject.js. Zapewne wkrótce wrócę do tej kwestii...

Problem #2 - pngFix

Kolejną wielką ujmą IE6 jest brak poprawnej prezentacji grafiki z plików .png z kanałem przezroczystości. W necie można bez problemu znaleźć sporo rozwiązań - sam korzystam głównie z jQuery PNG Fix.

Niestety przy realizacji ostatnich projektów, gdzie korzystam z biblioteki jQuery 1.4.2 powyższy pngFix już tak różowo nie działa. Jeszcze w przypadku zamieszczania png'ów jako tła dla <div> jest okey, to już przy tworzeniu blokowanych elementów menu (<a>) czy nagłówków graficznych (<h1>) grafika zostaje bardzo mocno zniekształcona :(

Propozycje rozwiązań: