Come risolvere il problema della trasparenza delle immagine PNG su Internet Explorer 6?<\/p>\n\n\n\n
E\u2019 risaputo che ogni browser applica gli standard secondo la propria interpretazione, come \u00e8 risaputo anche che Internet Explorer non li applica alla perfezione\u2026 Per\u00f2 dato che \u00e8 il browser pi\u00f9 utilizzato al mondo \u00e8 bene che ogni sito web venga visualizzato correttamente su questo browser.
E per risolvere questo problema c\u2019\u00e8 un javascript che fa al caso vostro, che con un hack risolve questa incompatibilit\u00e0 (che \u00e8 stata risolta su IE 7).<\/p>\n\n\n\n
\/*<\/em>
Correctly handle PNG transparency in Win IE 5.5 & 6.<\/em>
http:\/\/homepage.ntlworld.com\/bobosola. Updated 18-Jan-2006.<\/em>
Use in with DEFER keyword wrapped in conditional comments:<\/em>
<!--[if lt IE 7]><\/em>
<mce:script defer type=\"text\/javascript\" src=\"pngfix.js\" mce_src=\"pngfix.js\"><\/mce:script><\/em>
<![endif]--><\/em>
*\/<\/em>
function correctPNG() { \/\/ correctly handle PNG transparency in Win IE 5.5 & 6.
var arVersion = navigator.appVersion.split(\"MSIE\")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters)) {
for(var i=0; i<document.images.length; i++) {
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == \"PNG\") {
var imgID = (img.id) ? \"id='\" + img.id + \"' \" : \"\"
var imgClass = (img.className) ? \"class='\" + img.className + \"' \" : \"\"
var imgTitle = (img.title) ? \"title='\" + img.title + \"' \" : \"title='\" + img.alt + \"' \"
var imgStyle = \"display:inline-block;\" + img.style.cssText
if (img.align == \"left\") imgStyle = \"float:left;\" + imgStyle
if (img.align == \"right\") imgStyle = \"float:right;\" + imgStyle
if (img.parentElement.href) imgStyle = \"cursor:hand;\" + imgStyle
var strNewHTML = \"<span \" + imgID + imgClass + imgTitle
\" style=\\\"\" + \"width:\" + img.width + \"px; height:\" + img.height + \"px;\" + imgStyle + \";\"
\"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader\"
\"(src=\\'\" + img.src + \"\\', sizingMethod='scale');\\\">\"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent(\"onload\", correctPNG);<\/pre>\n\n\n\nQuesto script non funziona per le PNG nei CSS. Per fixare quest\u2019altro problema ci viene in aiuto la propriet\u00e0\u00a0filter<\/em>\u00a0di IE.<\/p>\n\n\n\n
Per esempio se avete un\u2019immagine PNG che utilizzate come background:<\/p>\n\n\n\n
#image {
background: transparent img.png no-repeat top left;
}<\/pre>\n\n\n\naggiungendo\u00a0filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=\u2019scale\u2019, xsrc=\u2019img.png\u2019);<\/em>\u00a0e sostituendo la PNG con\u00a0none<\/em>:<\/p>\n\n\n\n
#image {
background: transparent none no-repeat top left;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', xsrc='img.png');
}<\/pre>\n\n\n\nrisolverete il problema delle PNG nei CSS\u00a0<\/p>\n\n\n\n
Enjoy with IE Hacks\u2026\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"
Come risolvere il problema della trasparenza delle immagine PNG su Internet Explorer 6? E\u2019 risaputo che ogni browser applica gli standard secondo la propria interpretazione, come \u00e8 risaputo anche che Internet Explorer non li applica alla perfezione\u2026 Per\u00f2 dato che \u00e8 il browser pi\u00f9 utilizzato al mondo \u00e8 bene che ogni sito web venga visualizzato […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[14],"tags":[7,8,9,10,11,12,13],"aioseo_notices":[],"author_meta":{"display_name":"fabio","author_link":"https:\/\/fabiocicerchia.it\/author\/fabio"},"featured_img":null,"coauthors":[],"tax_additional":{"categories":{"linked":["Web<\/a>"],"unlinked":["Web<\/span>"]},"tags":{"linked":["css<\/a>","hack<\/a>","ie<\/a>","internet explorer<\/a>","italian<\/a>","javascript<\/a>","png<\/a>"],"unlinked":["css<\/span>","hack<\/span>","ie<\/span>","internet explorer<\/span>","italian<\/span>","javascript<\/span>","png<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 16 years ago","modified":"Updated 16 years ago"},"absolute_dates":{"created":"Posted on September 29, 2008","modified":"Updated on September 29, 2008"},"absolute_dates_time":{"created":"Posted on September 29, 2008 1:36 pm","modified":"Updated on September 29, 2008 1:36 pm"},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/posts\/432"}],"collection":[{"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/comments?post=432"}],"version-history":[{"count":0,"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/posts\/432\/revisions"}],"wp:attachment":[{"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/media?parent=432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/categories?post=432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/tags?post=432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}