internet-explorer - IE6 PNG透明度

Question

如何修复 IE6 中背景图像的 PNG 透明度错误？

score 20 · Accepted Answer

我喜欢David Cilley前段时间写的这个 Javascript 解决方案。它不受兼容浏览器的影响，可以与您想要的任何后端一起使用。不过，它仍然需要一个空白的 gif 图像。

将这些函数添加到您的 HTML Header 或其他现有 .js 包括：

<script type="text/javascript">
    function fixPngs(){
    // Loops through all img tags   
        for (i = 0; i < document.images.length; i++){
            var s = document.images[i].src;
            if (s.indexOf('.png') > 0)  // Checks for the .png extension
                fixPng(s, document.images[i]);
        }
    }

    function fixPng(u, o){
        // u = url of the image
        // o = image object 
        o.src = 'images/spacer.gif';  // Need to give it an image so we don't get the red x
        o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + u + "', sizingMethod='scale')";
    }   
</script>

将以下条件注释放在底部（页脚部分，就在 </body> 之前）：

<!--[if lte IE 6]>
    <script language="javascript" type="text/javascript">
        //this is a conditional comment that only IE understands. If a user using IE 6 or lower 
         //views this page, the following code will run. Otherwise, it will appear commented out.
        //it goes after the body tag so it can fire after the page loads.
        fixPngs();
    </script> 
<![endif]-->

要更全面地解决 IE6 异常，请尝试IE7 Javascript 库。

score 8 · Accepted Answer

使用这个： http: //www.twinhelix.com/css/iepngfix/

这也适用于 IE 5.5，但不适用于 IE 的 mac 版本或更早版本的 IE。

我在很少的网站上使用过它，并且没有遇到任何问题。

有时在 PNG 周围会出现一个丑陋的灰色框，直到脚本启动。

score 8 · Accepted Answer

使用PNG 行为。

ie6.css：

img {
   behavior: url("pngbehavior.htc");
}

page.html：

<!--[if IE 6]> 
  <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

score 3 · Accepted Answer

我要去这里取死灵法师徽章。:)

这并不完全是一个修复程序，而是我不时使用的一种方便的解决方法，以支持 IE6 上的透明度，而根本不需要任何额外的代码。它并不总是符合要求，但经常符合要求。

这个想法是，在大多数情况下，无论如何您都需要在固定颜色背景上显示您的 PNG。PNG 文件可以具有指定的背景颜色，IE6 将支持它。您所做的是获得TweakPNG实用程序并打开您的 PNG 文件。在那里您将能够添加一个bKGD块，它指定所需的背景颜色。只需输入显示 PNG 所需的颜色，即可完成。

注意事项 - PNG 文件通常包含一些值以补偿不同的显示设备。可能有诸如预期的色彩空间、色度、伽马等之类的东西。这些本身并不坏，但 IE 以某种方式误解了它们，结果是 PNG 显示的比应有的更暗（或者 IE 可能是唯一做对的人？我不记得了……）

无论如何，如果您希望每个浏览器都以相同的方式显示您的 PNG，您应该使用上述实用程序删除这些块。

score 2 · Accepted Answer

2

twinhelix png修复应该可以帮助你

于 2009-03-30T15:26:20.310 回答

score 2 · Accepted Answer

2

例如Dean Edwards 的 ie7.js

于 2009-03-30T15:26:57.610 回答

score 2 · Accepted Answer

您可以勇敢地简单地声明您的网站在 IE6 上可能无法很好地呈现。也许不是最具商业头脑的方法，但如果我们让 IE6 死掉，我们会帮自己一个忙（甚至是微软）。当然，由于大量的在线活动发生在安装了 IE6 的公司机器上，这不会很快发生。:(

score 2 · Accepted Answer

请注意，AlphaImageLoader 转换可能会使IE6 死锁。

使用PNG8s而不是常规的 PNG32s。您被限制为 256 种颜色和 1 位 alpha 透明度，但它比随机死锁浏览器要好。

score 2 · Accepted Answer

1.在文档的头块内添加 IE6 的条件 css：

<!--[if (IE 6)]>
    <link rel="stylesheet" type="text/css" href="locationOfyourCss/ie6.css"/>
<![endif]-->

2.在您的元素中分配类名：


<td class = yourClassName>

3.在ie6.css中，应用过滤器。您必须指定宽度和高度。将背景图像设置为 clear.cache.gif，如果没有这些属性，过滤器将无法工作：


.yourClassName{
    width:8px;
    height:22px;
    background: url("locationOfBlankImage/clear.cache.gif");
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='filePath/imageName.png', sizingMethod='scale');
}

score 2 · Accepted Answer

我正在做的一个项目中我正在做的是从 Paul Irish 的HTML5 Boilerplate中获得灵感，并将条件样式分配给整个页面。他在这里详细介绍了它，但简单地说，这个想法是在您网站上每个页面的 HTML 中添加条件检查，应用于 body 标记。像这样：

<!--[if lt IE 7 ]> <body class="ie6 pageStyle"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7 pageStyle"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8 pageStyle"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9 pageStyle"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body class="pageStyle"> <!--<![endif]-->

IE 浏览器会读取这些注释并应用这些样式。其他浏览器会忽略它。这样做的好处是您可以设计符合标准的网站，使用 PNG 等等。然后，在您的 CSS 中，在标准样式之后添加其他样式，为 IE 浏览器提供所需的样式。例如，我正在研究的一种样式使用 PNG 背景图像。为了让这个在 ie6 中玩得更好，我可以使用 javascript/htc 来替换它们，应用那里的许多 hack 之一。或者我可以这样做：

.someStyle {
    background: url(/images/someFile.png) no-repeat; 
background-position: -0px -280px;

}

.ie6 .someStyle {
   background: url(/images/someFile.gif) no-repeat; 
background-position: -0px -280px;

}

通过向我的 ie6 用户提供 GIF，没有占用 CPU 的解决方法过程，如果您曾经在可能运行 ie6 的那种 POS 机上进行过测试，这实际上是一个非常大的问题。而且，我并没有为拥有漂亮浏览器的优秀用户放弃任何品质。

它确实需要两个单独的文件，但我认为它比大多数实现更简洁。此外，使用 .ie6 .whatever 代替单独的 ie6.css 文件，可以使您的修复紧挨着它们所应用的样式，我发现它更简洁且更易于使用。它还鼓励您随时考虑 ie6 用户，而不是完成您的设计然后惊恐地回头

score 1 · Accepted Answer

这是一篇关于这个问题的好文章。总之，它提供了一个名为 SuperSleight 的 JS 库。我过去曾使用过它并取得了相当大的成功。

score 1 · Accepted Answer

好的，我对 html/js 几乎是新手，但我认为我必须稍微更改 Rob Allen 的答案来解决两个问题：

AlphaImageLoader() 正在改变我的图像的纵横比，所以我需要在图像加载后恢复原始大小。
如果从 html 末尾调用 fixPngs()，则在加载文档之后但在加载所有图像之前调用。

所以我改变了我的 fixPngs() 只附加一个事件：

function fixPngs() {
  // Loops through all img tags
  for(i = 0; i < document.images.length; i++) {
    var u = document.images[i].src;
    var o = document.images[i];

    if(u.indexOf('.png') > 0) {
      o.attachEvent('onload', fixPng);
      o.src = u;
    }
  }
}

fixPngs() 仍然从 html 的末尾被调用：

<!--[if lte IE 6]>
  <script language="javascript" type="text/javascript">
    // Do this after the page loads
    fixPngs();
  </script>
<![endif]-->

fixPng() 现在获取调用者，分离事件，保存原始尺寸，调用 AlphaImageLoader() 并最终恢复尺寸：

// u = url of the image
// o = image object
function fixPng(e) {
  var caller = e.target            ||
               e.srcElement        ||
               window.event.target ||
               window.event.srcElement;
  var u = caller.src;
  var o = caller;

  if(!o || !u)
    return;

  // Detach event so is not triggered by the AlphaImageLoader
  o.detachEvent('onload', fixPng);

  // Save original sizes
  var oldw = o.clientWidth;
  var oldh = o.clientHeight;

  // Need to give it an image so we don't get the red x
  o.src          = 'images/spacer.gif';
  o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ u +"', sizingMethod='scale')";

  // Restore original sizes
  if(o.style) {
    o.style.width  = oldw +"px";
    o.style.height = oldh +"px";
  }
}

我是不是过度杀戮了？

internet-explorer - IE6 PNG透明度

12 回答 12

Related

Reference