IE8中透明PNG周围的黑色边框答案

【问题标题】：Black border Around Transparent PNG in IE8IE8中透明PNG周围的黑色边框
【发布时间】：2011-10-21 09:43:37
【问题描述】：

我在 IE8 中的 jquery 滑块中遇到了一些关于透明 PNG 文件周围的黑色小边框的问题。它在所有浏览器（包括 IE6 和 7）中都可以正常工作，但在 IE8 中则不行。

你可以在这里看到它：http://www.socialogika.com/tabs/goliath/collection/

我已经尝试过在 stackoveflow 上找到的几个修复程序，但它们似乎都不是解决方案（还）...从 24 转向 PNG-8 解决了 Ie6 和 7 的问题，但在 8 中仍然存在问题

谁能指出一个可行的解决方案？

【问题讨论】：

你有一个统一的背景。为什么你不剪切图像旁边的“奶油”背景？ ....
只是一个问题，'PhoenixGallery'... 1500 行代码是为了什么？你用它做什么？你的画廊？
我记得不久前遇到过类似的问题。我认为问题与尝试更改透明 png 的不透明度有关。

标签： jquery internet-explorer-8 png fadein fadeout

【解决方案1】：

如果有帮助，请告诉我：http://channel9.msdn.com/forums/TechOff/257324-IE7-alpha-transparent-PNG--opacity/

我对 IE7 png 的不透明度问题进行了大量研究，并使用了两种解决方法，涵盖了大多数情况，但遗憾的是并非所有情况。

第一个已经在这个线程中提到过，它是为所需的不同不透明度提供不同的图像文件。当您只想显示状态时，此方法适用于 mouseover 和 mouseout 效果，但当您想要为不透明度设置动画时，遗憾的是无用。

第二种方法大部分时间都可以使用，但这取决于您的页面布局和设计。要伪造 div 的不透明度动画，您可以在要显示不透明度更改的真实 div 上放置一个虚拟的第二个 div。第二个 div 应该绝对定位并采用背景 div 的宽度和高度。然后根据您的页面设计，为其设置背景颜色（最适合真实背景图像 png 的颜色），然后根据您正在寻找的效果为该 div 上的不透明度设置动画以淡入或淡出。

因为无论如何您都将使用 javascript 来制作不透明动画，所以在需要效果时创建和插入新 div 并在完成后将其删除是很简单的。这允许网站访问者仍然可以复制、粘贴或右键单击实际的 div 内容。

另外，也许尝试确认我的预感是不透明度导致黑色边框显示：禁用所有淡入淡出效果并让我知道图像是否正确渲染。

【讨论】：

无论如何，它已经解决了为图像设置相同的背景颜色......

【解决方案2】：

嗯...尝试使用

.fadeTo()

DEMO

无论如何，您都可以使用这个小修复：

$('#mages img').css({background: '#EDE7DE'});

或者为 IE 创建一个 if 语句，您只需将 .fix 添加到所需的图像。 .fix 在您的 CSS 文件中，为图像添加所需颜色的背景。

if ($.browser.msie && $.browser.version <= 8 )
{
$('#gallery img').addClass('fix');
}

【讨论】：