Question

好的，这很奇怪......

以下是相关网页：http://s289116086.onlinehome.us/lawjournaltv/index.php

主要的蓝色标注背景最初是PNG，但是当我向它应用一些jQuery技巧时（单击右上角的数字看看我的意思），出现透明度应该是一个丑陋的白色边框。请参阅IE8的此屏幕截图：http://skitch.com/darkdriving/n62bu/windows-xp-professional

我认为我可以牺牲PNG的质量/灵活性，只是将每个背景重新保存为GIF并将哑光颜色设置为白色（暂时）。好吧，我被证明是错误的，因为IE正在将GIF透明度视为与原始PNG相同。

我在这里看到，PNG，Javascript和IE与多个过滤器有关的问题不能应用于一个图像，但不应该免除GIF，因为它们缺少Alpha通道？有没有办法让这个页面在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)'
    });

（此代码有效;我现在正在使用它）

Answer 2

我基本上通过在每次刷新页面上加载一组不同的图像（使用PHP）来解决这个问题。它不是那么动态，但我尝试使用丑陋的，专有的CSS过滤器或其他基于javascript的插件都没有结果。在我看来，这显然是我在浏览IE浏览器时遇到的最大错误之一。事实上，我很惊讶我花了很长时间才遇到它。

在这种情况下向智者说话：尝试以纯色支持透明图像或在IE中遭受后果。

使用jQuery的IE GIF / PNG透明度问题

2 个答案: