{"id":599,"date":"2009-02-12T13:47:06","date_gmt":"2009-02-12T12:47:06","guid":{"rendered":"http:\/\/www.nielsgamborg.dk\/wordpress\/?p=599"},"modified":"2009-02-12T13:47:06","modified_gmt":"2009-02-12T12:47:06","slug":"transparent-png-ie6","status":"publish","type":"post","link":"https:\/\/nielsgamborg.dk\/wordpress\/browser_bugs\/transparent-png-ie6.htm","title":{"rendered":"Transparent PNG i IE6"},"content":{"rendered":"

Problemet med transparent png i Internet Explorer 6 er\u00a0 velkendt og veldokumenteret.\u00a0IE6 underst\u00f8tter ikke png transparency<\/strong>, og\u00a0‘gennemsigtig’ vises i IE6 som\u00a0en lys bl\u00e5 baggrund.\u00a0\u00a0<\/p>\n

Der findes\u00a0mange l\u00f8sninger, problemet er at v\u00e6lge den rigtige. B\u00e5de i forhold til hvilke behov man har, og i forhold til\u00a0hvor\u00a0let det enkelte\u00a0png fix er at bruge.<\/p>\n

Jeg har udvalgt to af de bedste, der hver is\u00e6r har sine styker i forhold til transparent png.<\/p>\n

Den\u00a0lette vej til transparent png for IE6<\/h3>\n

Unit PNG transparency fix<\/a>\u00a0er den bedste allround l\u00f8sning.<\/p>\n

Du downloader et lille JavaScript (unitpngfix.js),\u00a0l\u00e6gger det\u00a0 i websites javascript mappe og peger p\u00e5 det i html headeren.\u00a0Pak det ind i en\u00a0conditional comment,\u00a0s\u00e5 sikrer\u00a0du,\u00a0at kun IE6 browsere downloader JavaScriptet:<\/p>\n

<!–[if lt IE 7]>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<script type=”text\/javascript” src=”javascript\/unitpngfix.js”><\/script>
\n<![endif]–>\u00a0\u00a0<\/p><\/blockquote>\n

Du skal ogs\u00e5 downloade et lille gif billede p\u00e5\u00a0 1×1 pixel, som du placerer i din grafik mappe.\u00a0 Til sidst skal du\u00a0\u00a0i toppen af unitpngfix.js, angive stien fra den aktuelle webside til denne\u00a0gif:<\/p>\n

var clear=”grafik\/clear.gif”;<\/p><\/blockquote>\n

Derefter virker alle de transparente png’er i IE6.\u00a0\u00a0Png billederne skal ikke have\u00a0specielle navne, eller classes. JavaScriptet tager automatisk fat p\u00e5 alle\u00a0png’er\u00a0og g\u00f8r dem transparente. B\u00e5de n\u00e5r billedet er placeret i et img\/image tag,\u00a0eller brugt som background-image.<\/p>\n

Dette er p.t. den\u00a0bedste og letteste l\u00f8sning p\u00e5 transparente png’ere\u00a0IMHO.<\/p>\n

Transparent png og background-image<\/h3>\n

Mange af png transparency JavaScriptsene, har desv\u00e6rre den bivirkning, at de ‘\u00f8del\u00e6gger’\u00a0css property’erne: background-position og background-repeat. Baggrundsbilledet vil blive placeret p\u00e5 defalut: “background-position:\u00a0\u00a0top left;”<\/p>\n

S\u00e5 hvis du har brug for at placere\u00a0eller gentage\u00a0et tranparent png som\u00a0background-image kan du bruge:<\/p>\n

IE6 tranparency med DD belated-PNG-fix<\/a><\/p>\n

Ogs\u00e5 dette JavaScript er selvf\u00f8lglig pakket ind i en conditional comment, s\u00e5 kun IE6 browsere skal downloade det.<\/p>\n

<!–[if IE 6]>
\n<script src=”DD_belatedPNG.js”><\/script>
\n<script>
\n\u00a0\u00a0DD_belatedPNG.fix(‘.png_background’);
\n\u00a0\u00a0DD_belatedPNG.fix(‘img’);
\n<\/script>
\n<![endif]–><\/p><\/blockquote>\n

I dette png fix skal JavaScript funktionen, der laver png transparens, kaldes med en CSS selector som argument. I ovenst\u00e5ende eksempel bruges CSS-selectoren ‘img’ og klassenavnet ‘.png_background’.<\/p>\n

Nogle gange kan CSS selectoren skrives sammen i samme funktions-kald, adskilt af et komma. Her et eksempel der virker p\u00e5 billeder i imgae tag og baggrundsbilleder p\u00e5 liste-elementet:<\/p>\n

DD_belatedPNG.fix(‘img,li’);<\/p><\/blockquote>\n

Men det virker ikke hver gang, s\u00e5 pr\u00f8v dig frem.<\/p>\n

Alternative l\u00f8sninger til tranperant PNG\u00a0<\/h3>\n

Hvis ovenst\u00e5ende l\u00e6sninger ikke passer til dine behov s\u00e5 tjek denne diskussion ud p\u00e5 multimedieforum.dk: Tranparent png i IE 6<\/a>. Tak for de kvalificerede input. :tup:<\/p>\n

Eller l\u00e6s denne artikel om tranpsparency and\u00a0png in\u00a0IE6<\/a>\u00a0fra 24 ways.org. Her er\u00a0gode forklaringer\u00a0om teorierne om\u00a0PNG transparens\u00a0og flere l\u00f8sningsforslag.<\/p>\n

L\u00e6s mere om png p\u00e5 wikien: PNG (Portable Network Graphics)\u00a0transparency<\/a>\u00a0. Beskrivelse af PNG formatet, baggrunden for det og gennemsigtighed og tranparens.<\/p>\n","protected":false},"excerpt":{"rendered":"

Problemet med transparent png i Internet Explorer 6 er\u00a0 velkendt og veldokumenteret.\u00a0IE6 underst\u00f8tter ikke png transparency, og\u00a0‘gennemsigtig’ vises i IE6 som\u00a0en lys bl\u00e5 baggrund.\u00a0\u00a0 Der findes\u00a0mange l\u00f8sninger, problemet er at v\u00e6lge den rigtige. B\u00e5de i forhold til hvilke behov man har, og i forhold til\u00a0hvor\u00a0let det enkelte\u00a0png fix er at bruge. Jeg har udvalgt to […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[129,204,273,274],"_links":{"self":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts\/599"}],"collection":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/comments?post=599"}],"version-history":[{"count":0,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts\/599\/revisions"}],"wp:attachment":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/media?parent=599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/categories?post=599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/tags?post=599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}