Mariusz Tarnaski "MariuszT"

Tak tak, wiem, że problem z przezroczystością plików graficznych PNG w Internet Explorer (wersje 5.5 i 6) nie jest wcale nowy i już dawno go rozwiązano. Nadal sprawy nie można ignorować, 24% polskich użytkowników internetu wciąż używa IE 6. Ja do tej pory nie musiałem się z tym problemem borykać dlatego niewiele mnie on interesował. Zmieniło się to kilka dni temu

Rozwiązań jest kilka ale większość ma swoje wady. Albo nie przechodzą walidacji albo nie działają we wszystkich przypadkach (np. gdy nasz PNG jest ustawiony jako tło) albo strasznie mulą przeglądarkę.

Tak się składa, że w moim najnowszym projekcie używam przezroczystego PNG w dwóch miejscach, jako tło warstwy. Szybko okazało się, że większość rozwiązań odpada...

Ale znalazłem dość uniwersalne rozwiązanie, najlepsze z tych o których czytałem, stąd ten wpis (bo wcale nie tak łatwo było to znaleźć... ).

Mowa tu o IE PNG Alpha Fix. Ten mały skrypcik HTC rozwiązuje większość problemów z przezroczystością PNG w IE. Nie będę się nad tym rozwodził, to po prostu działa, jest najlepsze z tego co udało mi się znaleźć i najmniej kłopotliwe Nie podoba mi się w nim tylko to, że trzeba dodatkowo dołączać przezroczysty GIF (jest tutaj) ale jakoś to przeboleję

No dobra, nie podoba mi się jeszcze to, że autor nie przygotował żadnej paczki do ściągnięcia z potrzebnymi plikami i najlepiej z kilkoma przykładami. Plik HTC jest do ściągnięcia tutaj.

Jak tego używać? Jest kilka sposobów. Najprostszy to dodanie odpowiedniej reguły do CSS. Autor proponuje coś takiego:

Jeżeli na stronie używasz przezroczystych PNG w wielu miejscach to możesz tak to właśnie ustawić. U mnie problem dotyczy tylko dwóch pliczków dlatego zdecydowanie lepiej jest stworzyć odpowiednią klasę i przypisać ją do odpowiednich warstw a następnie ustawić taki CSS:

Takie rozwiązanie będzie mniej obciążające dla przeglądarki (a więc szybsze).

Inny sposób (nie ma problemów z walidacją ale wymaga włączonego JavaScript i wcześniej musi być dołączony przynajmniej jeden zewnętrzny plik z regułami CSS):

W powyższym przykładzie są dwa sposoby dołączenia pliku HTC. Do wszystkich obiektów lub tylko do wybranych tagów. Przed umieszczeniem kodu na swojej stronie pamiętaj żeby wybrać tylko jedno z tych rozwiązań, nigdy oba. Dlatego którąś linijkę będziesz musiał usunąć.

Sposób na wyłączenie przezroczystych PNG podczas drukowania:

Na koniec chciałbym wspomnieć o jednym problemie na który się natknąłem. Jeżeli masz warstwę w której jest odnośnik a warstwa jako tło ma przezroczysty PNG i w CSS ustawiono position: relative; lub position: absolute; dla tej warstwy to odnośnik nie będzie klikalny Ot, taki kolejny bug w IE... Niestety nasz pliczek HTC za każdym razem informuje nas o takiej sytuacji zgrabnym alertem... Żeby go usunąć wystarczy zakomentować/usunąć te trzy linijki (oczywiście w pliku HTC):

Rozwiązanie powyższego problemu (nieklikalne odnośniki) niby jest tutaj ale ja się nie wczytywałem

Plik działa tylko w IE 5.5 i IE 6, w innych przeglądarkach jest ignorowany. Nie stwarza więc dodatkowych problemów.