Nemrég én is “felhomályosultam”, hogy az Internet Explorer 6-os verziója nem kezeli a transzparens png-ket. A következő, igen egyszerű és gyorsan beépíthető megoldást szeretném ismertetni.
A szkriptről röviden csak annyit (mint háttérinformáció):
- nem használja a Micro$oft “AlphaImageLoader” nevű förmedvényét
- támogatja a háttér pozícionálást (background-position), valamint a háttérismétlést (background-repeat)
- valamint javítja az IE6 alatt tapasztalt “szürke háttér” problémát
A DD_belatedPNG használata:
1 2 3 4 5 6 7 8 9 10 11 | <!--[if IE 6]> <script src="DD_belatedPNG.js"></script> <script> /* EXAMPLE */ DD_belatedPNG.fix('.png_bg'); /* string argument can be any CSS selector */ /* .png_bg example is unnecessary */ /* change it to what suits you! */ </script> <![endif]--> |
A fenti kód <head> tag-ban foglal helyet.
Értelemszerűen minden olyan elemnek, amelynek a háttere vagy a forrása png képre hivatkozik, és transzparenssé szeretnénk tenni: a példa alapján ’png_bg’ class-al látjuk el.
div-ek id-jét meg lehet adni, ha a hátterük, vagy a bennük lévő div-ek háttere png kép. DE, ’body’-t nem választhatjuk ki!
Továbbá megadhatjuk akár az ’img’-t is, így minden ’img’ taget “átkonvertál”.
Pár példa a helyes használathoz:
1 | DD_belatedPNG.fix('#div_neve'); |
1 | DD_belatedPNG.fix('#div_neve, img, .class_nev'); |
A szkript ezen a címen érhető el: DD_belatedPNG: Medicine for your IE6/PNG headache!
rengeteg ilyen és hasonló hack van IE6-ra, hiszen a szerencsétlen egy halom problémával küzd.
El kellene jutni oda, hogy aki IE6-ot használ, annak folyamatosan 1-2 percenként beugrik egy ablak az aktuális böngészőket ajánlva.
pl. a gmail vagy a youtube is ezt csinálja -igaz csak fent egy sorban jelenik meg, h chrome-ot használj…
megint nem lehet latni a postot
most látni a leírást és ki is próbáltam, eddig amikkel dolgom volt, messze ez a legjobb, egyszerű és gyors. köszönet érte!
“Nemrég én is “felhomályosultam”, hogy az Internet Explorer 6-os verziója nem kezeli a transzparens png-ket”
ez nem teljesen igaz, megérne egy teljes cikket, de már mások megírták:
http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
Csaba
Teljesen jó megoldás ez is, ehhez még tudnám ajánlani a slimejs-t is, amely olyasmi mint a dd-belated megoldás. drupalnal, joomlanal pl ez utobbiak helyett alkalmaztam a fentebbit, mert egyszerűbb, ugyanakor a dd-belated nagyon jól konfigurálható, cserébe jó sok memoriát kér :)