如何修复IE6中背景图片的PNG透明度问题？
IE6 PNG透明度
24
- Darth
1
有用的问题。我以为IE 6已经死了，但事实并非如此 :( - Bakhtiyor
12个回答
20
我很喜欢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>
将以下条件注释放置在底部（页脚部分，在标签之前）：
<!--[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库。
- Rob Allen
3
1你确定这适用于使用CSS应用的背景图像吗？ - Josh Stodola
1在这种设置下，它无法与背景图像一起使用，只能与img标签一起使用。 - Rob Allen
1解决方案可行，但改变了我的图像纵横比。为了解决这个问题，在调用AlphaImageLoader之前，我保存了原始大小，使用
var oldw = o.clientWidth; var oldh = o.clientHeight;，并在调用后恢复，使用if(o.style) { o.style.width = oldw +"px"; o.style.height = oldh +"px"; }。 - user10921968
请使用以下内容：
http://www.twinhelix.com/css/iepngfix/
这对于IE 5.5也有用，但对于Mac版本的IE或早期版本的IE则不适用。
我在许多网站上使用过它，并且没有遇到任何问题。
然而，有时候PNG周围会出现一个丑陋的灰色框，直到脚本启动。
我在许多网站上使用过它，并且没有遇到任何问题。
然而，有时候PNG周围会出现一个丑陋的灰色框，直到脚本启动。
- tsaunders
1
非常感谢你，你让我对付IE6的噩梦结束了。我以为IE6已经死了，但事实并非如此。这是解决透明PNG的最佳方案。+1 - Bakhtiyor
8
使用PNG行为。
ie6.css:
img {
behavior: url("pngbehavior.htc");
}
page.html:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
- vartec
3
我正在争取获得死灵法师徽章。 :)
这不是一个修复，而是我时常使用的一个方便的解决方法，以支持在IE6上无需任何额外代码的透明度。它并不总是完美适用，但通常情况下是可以的。
思路是大多数时候你需要在固定颜色背景上显示PNG文件。PNG文件可以指定背景颜色，IE6会遵循它。你需要做的就是获取TweakPNG实用程序并打开PNG文件。然后你将能够添加一个
注意 - PNG文件通常包括一些值来补偿不同的显示设备。可能会有一些像预期的颜色空间、色度、伽马等内容。这些并不是不好的，但IE会误解它们，结果是PNG显示比应该更暗（或者IE是唯一一个正确理解的？我不记得了...）
无论如何，如果您希望每个浏览器都能以相同的方式显示PNG图像，则应使用上述实用程序删除这些块。
这不是一个修复，而是我时常使用的一个方便的解决方法，以支持在IE6上无需任何额外代码的透明度。它并不总是完美适用，但通常情况下是可以的。
思路是大多数时候你需要在固定颜色背景上显示PNG文件。PNG文件可以指定背景颜色，IE6会遵循它。你需要做的就是获取TweakPNG实用程序并打开PNG文件。然后你将能够添加一个
bKGD块，指定所需的背景颜色。只需输入你需要显示PNG的颜色，就完成了。注意 - PNG文件通常包括一些值来补偿不同的显示设备。可能会有一些像预期的颜色空间、色度、伽马等内容。这些并不是不好的，但IE会误解它们，结果是PNG显示比应该更暗（或者IE是唯一一个正确理解的？我不记得了...）
无论如何，如果您希望每个浏览器都能以相同的方式显示PNG图像，则应使用上述实用程序删除这些块。
- Vilx-
2
你可以勇敢地声明你的网站在IE6上可能无法正常渲染。这可能不是最商业化的方法，但如果我们让IE6消失，我们所有人（甚至包括微软）都会受益。当然，由于大量在线活动发生在安装了IE6的公司机器上，这并不会很快发生。:(
- AnthonyWJones
5
我同意。除了公司网站之外的任何东西都应遵循标准并忽略IE。 - Zifre
一家公司的网站有更大的理由坚持标准，因为开发跨浏览器的成本比指定浏览器要高得多，所以你可以说它将成为一个仅支持标准的网站，并使用符合标准的浏览器。 - AnthonyWJones
1你忽略了那些没有使用你所支持的浏览器并且不愿意转换的客户流失成本。这个成本可能比多浏览器支持的成本高得多。 - Erik Funkenbusch
@Mystere：我认为你不能太认真地对待这个答案。我确实说过这不是商业上的考虑。就像许多对每个人都有好处的事情一样（比如更好地管理环境和消除贫困），有意义的事情通常并不商业化。 - AnthonyWJones
IE6可以被抛弃了。说真的，尽管它仍然占有21%左右的市场份额。 - CMircea
2
请注意，AlphaImageLoader 转换可能会导致 IE6 死锁。
使用 PNG8s 而不是常规的 PNG32s。虽然您只能使用 256 种颜色和 1 位 alpha 透明度，但这比随机死锁浏览器要好。
使用 PNG8s 而不是常规的 PNG32s。虽然您只能使用 256 种颜色和 1 位 alpha 透明度，但这比随机死锁浏览器要好。
- George V. Reilly
2
1.在文档的头部块中为IE6添加条件性CSS：
<!--[if (IE 6)]>
<link rel="stylesheet" type="text/css" href="locationOfyourCss/ie6.css"/>
<![endif]-->2.Assign class name in your element:
<td class = yourClassName>
3.In ie6.css, apply filter. You have to specify width and height. Set background image to clear.cache.gif, the filter doesn't work without those properties:
.yourClassName{
width:8px;
height:22px;
background: url("locationOfBlankImage/clear.cache.gif");
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='filePath/imageName.png', sizingMethod='scale');
}
- powpow
2
我在正在进行的一个项目中所做的是借鉴Paul Irish的 HTML5 Boilerplate，并为整个页面分配有条件的样式。他在这里详细介绍了这一点，但简而言之，其想法是在您网站上每个页面的HTML中添加有条件的检查，并应用于body标签。像这样：
IE浏览器将读取这些注释并应用那些样式。其他浏览器将忽略它。这种方法的巧妙之处在于，您可以设计符合标准的网站，使用PNG等任何东西。然后，在您的CSS中，添加额外的样式放置在标准样式之后，以给IE浏览器提供所需的样式。例如，我正在使用一种样式，其中包含一个PNG背景图像。为了使其在ie6中正常工作，我可以使用javascript / htc来替换它们，应用其中的许多hack之一。或者我可以这样做：
通过向我的IE6用户提供GIF，没有CPU占用的解决方案，如果你曾经在运行IE6的POS机器上测试过，这实际上是一个非常大的问题。而且，我没有为我的好浏览器用户放弃任何质量。
它确实需要两个单独的文件，但我认为它比大多数实现更清晰。此外，使用.ie6 .whatever而不是单独的ie6.css文件，可以让您的修复程序紧挨着它们适用的样式，我认为这更加清晰和易于使用。它还鼓励您在进行设计时考虑IE6用户，而不是完成设计后回头惊恐地看着IE6用户。
<!--[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用户，而不是完成设计后回头惊恐地看着IE6用户。
- Chris Ladd
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接