IE6 处理透明 PNG 的问题
我已经习惯了这样的想法：如果我想/需要以跨浏览器的方式使用 alpha-trans PNG，我会在 div 上使用背景图像，然后在仅限 IE6 的 CSS 中将背景标记为“ none”并包含正确的“filter”参数。
还有别的办法吗？ 有更好的方法吗？ 有没有办法用 img 标签而不是背景图像来做到这一点？
I've gotten used to the idea that if I want/need to use alpha-trans PNGs in a cross-browser manner, that I use a background image on a div and then, in IE6-only CSS, mark the background as "none" and include the proper "filter" argument.
Is there another way? A better way? Is there a way to do this with the img tag and not with background images?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
图像加载器是 IE6 唯一可用的修复程序。 请注意，它的 PNG 支持非常初级（IE7 也是如此），并且无法正确处理循环透明背景。 当我尝试设计一个带有透明容器的网站时，我经历了惨痛的教训。 当然，在 Firefox 中运行得很好。
对于小区域的背景和任何透明的前景图形，该修复应该没问题，但我再次建议不要设计一个使用 Internet Explorer 大量透明度的网站。
最后我的解决方案是为 IE 显示纯色，但保留其他浏览器的透明度。 幸运的是，最终没有对设计造成太大影响。
The image loader is the only available fix for IE6. Note that it's PNG support is very rudimentary (along with IE7, too), and cannot correctly handle looped transparent backgrounds. I learnt this the hard way when trying to design a website with a transparent container. Worked perfectly in Firefox, of course.
The fix should be OK for small areas of background and any transparent foreground graphics, but again I'd advise against designing a website that uses large amounts of transparency with Internet Explorer.
In the end my solution was to display a flat colour for IE, but retained the transparency for the other browsers. Didn't hurt the design too much in the end, fortunately.
最重要的是，如果您希望 PNG 具有 alpha 透明度，并且希望它在 IE6 中工作，那么您需要应用 AlphaImageLoader 过滤器。
现在，有很多方法可以做到这一点：浏览器特定的黑客、条件注释、Javascript/JQuery/JLibraryOfChoice 元素迭代、通过 UserAgent 嗅探的服务器端 CSS 服务...
但所有这些都归结为应用过滤器并且背景被移除。
The bottom line is, if you want alpha transparency in a PNG, and you want it to work in IE6, then you need to have the AlphaImageLoader filter applied.
Now, there are numerous ways to do it: Browser specific hacks, Conditional Comments, Javascript/JQuery/JLibraryOfChoice element iteration, Server-Side CSS-serving via UserAgent-sniffing...
But all of 'em come down to having the filter applied and the background removed.
这是我喜欢的具体解决方案，使用 Javascript (jQuery)：
http://jquery.andreaseberhard.de/pngFix/
它很容易添加到现有站点，处理各种类型的图像（表单按钮、背景、常规 IMG 标签等），并使您的 CSS 保持美观和干净。
Here's a specific solution I like, using Javascript (jQuery):
http://jquery.andreaseberhard.de/pngFix/
It's easy to add to an existing site, handles all manner of images (form buttons, backgrounds, regular IMG tags, etc), and leaves your CSS nice and clean.
这很可能是“最好”的方式。 但请记住，当涉及到 PNG 文件时，IE6 不仅不能正确实现 alpha-trans，还无法正确实现 alpha-trans。 由于 IE 未正确实现伽玛，颜色空间已损坏，因此 PNG 文件通常显示比应有的“更暗”。
我们在最近的一个项目中实现的另一种“解决方案”是用“toGif”类标记每个 png 图像，在该类的 CSS 中调用自定义行为 .htc，如果浏览器是，则将 .png 扩展名更改为 .gif检测到我们已将其标记为问题。 我们只是将每个 PNG 的 GIF 版本包含在同一路径中，如果发现浏览器不能正确处理 PNG，它会将其替换为图像的 GIF 版本。 因此，我们牺牲了 alpha 混合以保证完全的透明度和颜色准确性，并且只有当我们知道它可能不会按原样看起来正确时才这样做。
这可能不是一个理想的解决方案，但我认为这是跨浏览器的本质。
编辑：实际上，现在我查看了相关项目，我们还对名为“alpha”的 img 类使用了 .htc 行为，它会自动在图像上抛出正确的过滤器。 因此，您使用 javascript 而不是仅适用于 IE6 的纯 CSS 黑客来检测浏览器，因此它可能会更优雅一些......但它基本上是相同的事情。
有关如何编写 DHTML 行为的介绍，请尝试此链接。
That's most likely the "best" way. But keep in mind that it's not just alpha-trans that IE6 doesn't implement properly when it comes to PNG files; the color space is corrupt due to IE not implementing the gamma properly, and thus PNG files often show "darker" than they should.
One alternative "solution" that we implemented on a recent project was to mark every png image with a "toGif" class, in the CSS of which a custom behavior .htc is called which changes the .png extension to .gif if the browser is detected to be one we've marked as a problem. We just include a GIF version of every PNG alongside it in the same path, and if the browser is found to be one that doesn't handle PNGs properly, it swaps it out with a GIF version of the image. We therefore sacrifice the alpha blending in favor of guaranteed full-on transparency and color accuracy, and only do so when we know it's probably not going to look right as-is.
It may not be an ideal solution, but it's the nature of cross-browser I suppose.
Edit: Actually now that I look at the project in question, we used an .htc behavior for an img class called "alpha" as well which tosses the correct filter on the image automatically. So you're detecting the browser using javascript instead of an IE6-only pure CSS hack, so it might be a little bit more elegant... but it's basically the same thing.
For an introduction to how to write DHTML behaviors, try this link.
这里有 2 个不使用 AlphaImageLoader 过滤器的选项。
对于我来说，如果仅将 matted .gif 发送到 IE6 是不行的可行，我使用 Fireworks 将 IE6 友好的调色板添加到 .PNG。
Here are 2 options which do not use the AlphaImageLoader filter.
For me, if sending a matted .gif to IE6 only isn't feasible, I use Fireworks to add an IE6-friendly palette to the .PNG.
解决这个问题的另一种方法是使用 2 个单独的图像，例如 GIF 和透明 PNG，并相应地定位您的 CSS：
IE 6 不理解 CSS 子选择器，因此将忽略该规则，而理解它的浏览器将为您提供一个不错的选择。透明PNG.
唯一的缺点是您必须有两个单独的图像，并且设计可能在跨浏览器上看起来不完全一样，但只要它看起来没有损坏就应该没问题。
Another way around this is to use 2 separate images, e.g a GIF and a transparent PNG, and target your CSS accordingly:
IE 6 does not understand CSS child selectors so will ignore the rule, whereas browsers that do understand it will give you a nice transparent PNG.
The only downside is that you have to have two separate images and the design might not look exactly the same cross-browser but as long as it does not look broken you should be ok.
img 元素的通常解决方案是更改 src 以指向 1x1 像素透明 GIF，然后使用相同的过滤器 hack。
The usual solution for img elements is to change the src to point to a 1x1 pixel transparent GIF and then use the same filter hack.