透明PNG的IE6问题
我已经习惯了以下想法:如果我想/需要以跨浏览器的方式使用alpha-trans PNG,我会在div上使用背景图片,然后在仅IE6的CSS中将背景标记为无",并包含适当的"过滤器"参数。
还有另一种方法吗?有更好的方法吗?有没有办法用img标签而不是背景图片来做到这一点?
解决方案
底线是,如果要在PNG中使用Alpha透明度,并且希望它在IE6中工作,则需要应用AlphaImageLoader过滤器。
现在,有很多方法可以实现:浏览器特定的技巧,条件注释,Javascript / JQuery / JLibraryOfChoice元素迭代,通过UserAgent-sniffing进行服务器端CSS服务...
但是,所有这些都归结为应用了滤镜和删除了背景。
img元素的通常解决方案是将src更改为指向1x1像素透明GIF,然后使用相同的过滤器技巧。
这很可能是"最佳"方式。但是请记住,IE6不能正确实现PNG文件,而不仅仅是alpha-trans。由于IE无法正确实现伽玛,颜色空间已损坏,因此PNG文件经常显示"暗"。
我们在最近的项目中实现的另一种"解决方案"是用" toGif"类标记每个png图像,在CSS的CSS中调用了自定义行为.htc,如果浏览器是检测到我们已将其标记为问题。我们只在同一路径中包含每个PNG的GIF版本,并且如果发现浏览器不能正确处理PNG,则会将其替换为图像的GIF版本。因此,我们牺牲了alpha混合,以保证完整的透明性和色彩准确性,并且只有在我们知道它可能看起来不正确的情况下才这样做。
这可能不是理想的解决方案,但是我想这是跨浏览器的性质。
编辑:实际上,现在我看了一个有问题的项目,我们对名为" alpha"的img类也使用了.htc行为,它也会自动将正确的滤镜投放到图像上。因此,我们正在使用javascript而不是仅使用IE6的纯CSS hack检测浏览器,因此它可能更优雅……但这基本上是相同的。
有关如何编写DHTML行为的介绍,请尝试此链接。
这是我喜欢的使用Javascript(jQuery)的特定解决方案:
http://jquery.andreaseberhard.de/png修复/
添加到现有站点很容易,可以处理各种图像(表单按钮,背景,常规IMG标签等),并使CSS保持整洁。
图像加载器是IE6唯一可用的修复程序。请注意,它的PNG支持非常基本(也包括IE7),并且不能正确处理循环的透明背景。在尝试使用透明容器设计网站时,我很难学到这一点。当然,在Firefox中可以完美运行。
该修复程序对于较小的背景区域和任何透明的前景图形应该可以,但是我还是建议不要设计一个使用Internet Explorer大量使用透明度的网站。
最后,我的解决方案是为IE显示纯色,但保留其他浏览器的透明性。幸运的是,最终并没有对设计造成太大的伤害。
解决此问题的另一种方法是使用2个单独的图像,例如GIF和透明的PNG,并相应地定位CSS:
/* for IE 6 */ #banner { background:url(../images/banner.gif); } /* for other browsers */ html > #banner { background:url(../images/banner.png); }
IE 6无法理解CSS子选择器,因此将忽略该规则,而能够理解该规则的浏览器将为我们提供一个很好的透明PNG。
唯一的缺点是我们必须拥有两个单独的图像,并且该设计可能看起来不完全相同,但只要看起来不坏,我们就可以。
这是两个不使用AlphaImageLoader滤镜的选项。
- Drew Diller的DD_belatedPNG:使用基于VML的解决方案,而不是AlphaImageLoader过滤器。
- PNGPong:基于Flash的解决方案
对我来说,如果仅将有毛边的.gif仅发送到IE6是不可行的,则可以使用Fireworks向.PNG中添加一个IE6友好的调色板。