Rešavanje problema s prozirnim PNG‑slikama u Internet Exploreru 6

Internet Explorer 6 je najstariji preglednik koji još uvijek koristi neka web‑stranica. Njegova ograničenja u prikazu prozirnih PNG‑slika mogu narušiti izgled i funkcionalnost vašeg web‑sajta. U nastavku ćemo detaljno objasniti kako jednostavno ispraviti taj problem, bez dodatnog programiranja ili složenih rješenja.

Zašto je prikaz PNG‑slika bitan?

Prozirne PNG‑slike omogućuju da se grafika uklopi u dizajn bez bijelih rubova, čime se postiže profesionalniji izgled. U starijim verzijama Internet Explorera PNG‑slike s alfa kanalom prikazuju se kao potpuno neprozirne, što može dovesti do nečistoće na stranici, a u nekim slučajevima i do neaktivnih poveznica unutar slika. Rješenje koje ćemo opisati osigurava da se slike prikazuju ispravno i da linkovi ostanu funkcionalni.

Priprema za ispravljanje PNG‑slika

Prije nego što započnete, potrebno je preuzeti i postaviti nekoliko datoteka na vaš server. Slijedite ove korake:

1. Preuzimanje skripte – Preuzmite ZIP arhivu s IE PNG FIX (na raznim razvojnim forumima ili GitHub repozitorijima). Nakon raspakiravanja, u korijenskom direktoriju vaše web‑stranice stavi:
• iepngfix.htc – skripta koja ispravlja PNG‑slike
• 1x1.png – pomoćna slika od jedne pikselske veličine
2. Postavljanje datoteka – Umetnite obje datoteke u glavni direktorij vaše web‑stranice ili u poddirektorij po vašoj želji, ali zabilježite točan put.
3. Provjera dozvola – Pobrinite se da su datoteke dostupne javno i da imaju ispravne dozvole za čitanje.

Uključivanje skripte u vašu stranicu

Otvorite glavni HTML‑fajl vaše web‑stranice i unutar dodajte sljedeći blok:

Ovaj kod se aktivira samo u Internet Exploreru 6 i starijim. Zamijenite selektore img, div, a s onima koji se odnose na elemente na vašoj stranici koji sadrže prozirne PNG‑slike. Na primjer, ako koristite div.logo ili img.icon, zamijenite ih u kodu.

Provjera i prilagodba

Nakon što ste postavili datoteke i uključili kod, otvorite stranicu u Internet Exploreru 6 (ili emulatoru) i provjerite da li se PNG‑slike prikazuju ispravno. Ako neki elementi i dalje ne funkcioniraju, provjerite:

• da li je putanja do iepngfix.htc ispravna,
• da li su selektori u CSS‑u usklađeni s HTML‑om,
• da li su datoteke dostupne na serveru.

U slučaju da koristite CSS pozadinske slike, dodajte i background: none; prije pozadinske slike kako biste izbjegli konflikte.

Zaključak

S ovim jednostavnim postupkom možete osigurati da vaše prozirne PNG‑slike izgledaju ispravno čak i u zastarjelom pregledniku. Iako je