IE6透明PNG问题

底线是,如果您希望在PNG中使用alpha透明,并且希望它在IE6中工作,那么您需要应用alphaImageLoader过滤器。

现在,有很多方法可以做到这一点:特定于浏览器的黑客、条件注释、javascript/jquery/jlibraryofchoice元素迭代、通过用户代理嗅探提供服务器端CSS服务……

但所有的问题归根结底都是应用了过滤器,去除了背景。

下面是我喜欢的一个特定的解决方案,使用javascript(jquery):

http://jquery.andreaseberhard.de/pngFix/

它很容易添加到一个现有的网站,处理各种各样的图像(表单按钮,背景,常规的img标签等),并使您的CSS保持整洁。

这很可能是最好的方法。但请记住,IE6在处理PNG文件时并没有正确地实现,这不仅仅是阿尔法转换;由于IE没有正确地实现gamma,颜色空间被破坏,因此PNG文件经常显示“比它们应该显示的更暗”。
我们在最近的一个项目中实现的另一个“解决方案”是用一个“to gif”类标记每个PNG图像,在CSS中,自定义行为被称为.htc,它将.png扩展名更改为.gif,如果检测到浏览器是我们标记为问题的浏览器。我们只在同一路径中包含每个PNG的一个GIF版本,如果发现浏览器不能正确处理PNG,它会用一个GIF版本的图像来交换它。因此,我们牺牲了alpha混合,以保证透明度和颜色准确性,只有当我们知道它可能看起来不太合适时才这样做。
这可能不是一个理想的解决方案,但我想这是跨浏览器的本质。
编辑:事实上,现在我看一下这个项目,我们对一个名为“alpha”的img类使用了一个.htc行为,它会自动在图像上抛出正确的过滤器。所以你用javascript而不是纯的IE6 CSS来检测浏览器,所以它可能会更优雅一点…但基本上是一样的。
要了解如何编写DHTML行为,请尝试 this link .

图像加载器是IE6唯一可用的修复程序。请注意,它的PNG支持非常初级(也包括IE7),不能正确处理循环透明背景。当我试图设计一个透明容器的网站时,我很难理解这一点。当然,在火狐中工作得很好。

对于小范围的背景和任何透明的前景图形,修复应该是可以的,但是我再次建议不要设计一个使用大量透明的Internet Explorer的网站。

最后,我的解决方案是为IE显示一个平面颜色,但保留了其他浏览器的透明度。幸运的是,最终并没有对设计造成太大的伤害。

另一种解决方法是使用两个单独的图像,例如一个GIF和一个透明PNG,并相应地针对您的CSS:

/* for IE 6 */
#banner {
    background:url(../images/banner.gif);
}

/* for other browsers */
html > #banner {
    background:url(../images/banner.png);
}

IE6不理解CSS子选择器,因此将忽略该规则,而了解该规则的浏览器将为您提供一个透明的PNG。

唯一的缺点是,你必须有两个独立的图像,而设计可能看不到 确切地 同样的跨浏览器,但只要它看起来不坏,你应该是好的。

这里有两个不使用alphaImageLoader过滤器的选项。

• DD_belatedPNG by Drew Diller :使用基于VML的解决方案,而不是AlphaImageLoader筛选器。
• PNGPong :基于闪存的解决方案

对我来说,如果只发送matted.gif到ie6是不可行的,我使用 Fireworks to add an IE6-friendly palette to the .PNG .

对于img元素,通常的解决方案是将src更改为指向1x1像素透明的gif,然后使用相同的过滤黑。