Question

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

Answer 1

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

将这些功能添加到HTML标头或其他现有.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>

在底部放置以下条件评论（页脚部分，就在之前＆LT; /体＆GT; ）：

<!--[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 library。

Answer 2

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

这对IE 5.5也有好处，但不适用于IE的IE版本或早期版本的IE。

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

然而，在剧本开始之前，PNG周围可能会出现一个丑陋的灰色框。

Answer 3

使用PNG Behaviour。

ie6.css：

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

page.html中：

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

Answer 4

我要去看死灵士徽章。：）

这不是一个解决方案，而是一个方便的解决方法，我不时使用它来支持IE6的透明度，而不需要任何额外的代码。它并不总是适合这个账单，但通常都是这样。

这个想法是大多数时候你需要在固定的彩色背景上显示你的PNG。 PNG文件可以指定背景颜色，IE6将遵守它。您所做的是获得TweakPNG实用程序并打开您的PNG文件。在那里，您将能够添加bKGD块，指定所需的背景颜色。只需输入显示PNG所需的颜色，即可完成。

一个注意事项 - PNG文件通常包含一些值来补偿不同的显示设备。可能会有像预期的色彩空间，色度，伽玛等等。这些本身并不坏，但IE在某种程度上误解了它们，结果是PNG显示出比它们应该更暗的颜色（或者IE可能是唯一一个做得对的人？我不记得......）

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

Answer 5

twinhelix png fix可以帮助你

Answer 6

例如Dean Edwards' ie7.js

Answer 7

您可能会勇敢而且只是说明您的网站在IE6上可能无法很好地呈现。也许不是最具商业头脑的方法，但如果我们让IE6死掉，我们会帮自己一个人（甚至微软）。当然，因为大量的在线活动发生在企业机器上，IE6钉在他们身上并不会很快发生。：（

Answer 8

请注意AlphaImageLoader转换可以deadlock IE6。

使用PNG8s代替常规PNG32。您只能使用256种颜色和1位Alpha透明度，但它会随机地阻塞浏览器。

Answer 9

1.在文档的head block中添加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');
}

Answer 10

我正在进行的项目中正在做的是从Paul Irish的HTML5 Boilerplate中获取提示并将条件样式分配给整个页面。他详细介绍了here，但简单地说，我们的想法是在网站上每个页面的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替换它们，在那里应用其中一个hacks。或者我可以这样做：

.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占用变通过程，如果你曾经测试过那种可能正在运行的POS机，那么这实际上是一个非常大的问题。并且，我没有放弃任何有良好浏览器的好用户的质量。

它需要两个单独的文件，但我认为它比大多数文件更清晰。此外，使用.ie6。而不是单独的ie6.css文件，无论如何都能使您的修复程序紧跟其应用的样式，我发现它更干净，更易于使用。它还鼓励你在你去的时候考虑ie6用户，而不是完成你的设计然后再回头看恐怖

Answer 11

这是关于此问题的great article。总之，它提供了一个名为SuperSleight的JS库。我过去曾经使用它取得了相当大的成功。

Answer 12

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

AlphaImageLoader（）正在更改图像的宽高比，因此我需要恢复原始尺寸 AFTER 图像的加载。
fixPngs（），如果从html末尾调用，则在加载文档之后但在加载所有图像之前调用。

所以我已经将我的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;
    }
  }
}

仍在从html结尾调用fixPngs（）：

<!--[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";
  }
}

我是否过度使用了它？

IE6 PNG透明度

12 个答案: