如何在 IE6 中呈现透明的 PNG？答案

【问题标题】：How to render a PNG with transparency in IE6?如何在 IE6 中呈现透明的 PNG？
【发布时间】：2011-09-19 11:08:10
【问题描述】：

我有一个非常漂亮的 Web 应用程序，带有吸引人的图标图像。我的 CSS 和所有其他 UI 在除 IE 之外的所有其他浏览器中看起来都很棒。

如何使 PNG 正确显示？

【问题讨论】：

谷歌“IE6 PNG修复”？有很多方法可以解决这个问题。
试试看这个twinhelix.com/css/iepngfix
代码中的实际问题是什么？你能从那里放一些代码吗
正如@James 所说，这是一个众所周知的问题（在 SO 上肯定有几十个这个问题的答案，更不用说在整个互联网上）。但真正的问题是为什么人们仍然坚持支持 IE6。请停止支持这个古老的浏览器——尤其是像这样简单的装饰性的东西，网站仍然可以工作。真正还在使用IE6的人肯定已经习惯了现在看起来很垃圾的互联网，所以没有理由为他们弯腰。
@Spudley - 我猜在印度它仍然是标准。

标签： javascript html css png internet-explorer-6

【解决方案1】：

显然，由于您没有提供任何信息，我们不知道究竟是什么显示不正确。如果您想在 IE6 中使用透明 PNG 文件，请查看此链接 http://24ways.org/2007/supersleight-transparent-png-in-ie6

【讨论】：

【解决方案2】：

在 Internet Explorer 6 及更低版本中，transparetn png 无法正确显示。 png 的透明部分不是透明的，而是纯色的。无论如何要解决这个问题，将此代码添加到您的 head 标签中。

<script language="JavaScript">
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');\"></span>" 
            img.outerHTML = strNewHTML
            i = i-1
         }
      }
   }    
}
window.attachEvent("onload", correctPNG);
</script>

【讨论】：

【解决方案3】：

你应该试试这个

<div style="position:relative; height: 188px; width: 188px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 
(src='images/image.png',sizingMethod='scale');"></div>

或者使用从这里下载的 JS http://labs.unitinteractive.com/downloads/unitip.zip 或http://www.twinhelix.com/css/iepngfix/

【讨论】：