javascript - jQuery 的 IE GIF/PNG 透明度问题

Question

好吧，这很奇怪......

这是有问题的页面:http://s289116086.onlinehome.us/lawjournaltv/index.php

主要的蓝色标注背景最初是 PNG，但当我对其应用一些 jQuery 技巧时(单击右上角的数字了解我的意思)，一个难看的白色边框出现在应该透明的位置。请参阅 IE8 的屏幕截图:http://skitch.com/darkdriving/n62bu/windows-xp-professional

我想我可以牺牲 PNG 的质量/灵 active ，然后将每个背景重新保存为 GIF，并将 mask 颜色设置为白色(目前)。好吧，事实证明我错了，因为 IE 将 GIF 透明度视为与原始 PNG 相同。

我在这里读到 PNG、Javascript 和 IE 的问题与无法将多个滤镜应用于一张图像有关，但 GIF 不应该因为缺少 Alpha channel 而免于此问题吗？有什么方法可以使该页面在 IE 中看起来与 Firefox 或 Webkit 浏览器相似？

提前致谢!

Answer 1

这是 IE 中的错误。

当前版本的 IE 不支持 opacity CSS proeprty，因此 jQuery 改用 Alpha 过滤器。但是，滤镜会强制元素完全不透明，因此它们无法正确处理透明 PNG。

要在半透明元素中使用透明 PNG，需要使用 AlphaImageLoader 过滤器(即使在 IE8 中)应用 PNG。例如:

if ($.browser.msie)
    $(something).css({
        background: 'none',
        filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/Folder/Image.png", sizingMethod="scale"),alpha(opacity=100)'
    });

(此代码有效；我现在正在使用它)