当PNG淡入时，IE显示黑色边框

Question

这是我的网站：http://smartpeopletalkfast.co.uk/ppr6/ 我有一些带有透明度的PNG图片，使用jQuery进行淡入。IE8（尚未测试其他浏览器）在淡入时显示PNG周围的黑色边框。我知道这是一个公认的问题，我已经尝试了几种方法但没有成功。

然而，我注意到心形图案（最后加载的图像）没有黑色边框。为什么这个是正常的？希望如果我找出原因，我可以用它来修复其他图片。

谢谢。

更新：

我已经玩弄了代码很久，没有意识到我无意中禁用了心形图案的淡入效果，所以没有边框。

这是一个奇怪的问题。在我查看的所有论坛中，有些解决方案对某些人有效，但对其他人无效。

- Evanss

---

我不确定我能回答你的问题，但是关于IE与jQuery淡入淡出时PNG透明度问题的更多信息，请参考：https://dev59.com/ZnM_5IYBdhLWcg3w8ILR - Michael Martin-Smucker

使用 PNG-8 对我很有效。图像有一个轻微的白边，在实际文件中而不是浏览器问题，但在我的情况下看起来还不错。 - Evanss

Answer 1

我知道这个帖子非常旧了，但是我找到了这篇文章，对我来说非常有效，它完全可以在IE7、IE8中去除PNG的黑色边框。

.item img {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */ 
}

您可以在此帖子中找到它：http://www.sitepoint.com/forums/showthread.php?590295-jQuery-fadein-fadeout-of-transparent-png-in-IE7-and-Chrome

该网址提供了有关在IE7和Chrome中使用jQuery淡入淡出透明png的信息。

- Carlos Quijano

---

此解决方案适用于既有背景图片又有背景元素的情况。非常感谢！ - R Keppel

Answer 2

将此属性添加到您的标签中，如下所示

<img src="/someimage.png" alt="yourImageDesc" style="border-style: none" />

- Steven

---

这个代码是用来去掉白色边框的吗？但是它对我不起作用。白色边框是在非透明像素周围，而不是整个 PNG 图像周围。你可以在这里看到：http://smartpeopletalkfast.co.uk/ppr6/ - Evanss

它还去掉了我的 PNG 图片周围的黑色边框 :) - samneric

Answer 3

对于我来说，使用PNG-8格式可以解决问题。图片上有一点白色边框，这是实际文件自带的问题，不是浏览器问题，但在我的情况下，这看起来很好。

- Evanss

Answer 4

设置背景颜色

background: #E1AE07;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -khtml-opacity: 0.50;
    -moz-opacity: 0.50;
    opacity: 0.50;

- anon

Answer 5

我曾经在使用jQuery设置元素的不透明度方面遇到了同样的问题，就像这样：$('div').css('opactiy',0.5); 我通过为涉及的“div”设置一个纯色背景来解决它。

简单演示：http://jsfiddle.net/mwXs3/3/（在Firefox和IE8中进行比较）...

- schellmax

---

不幸的是，设置在div.image上的背景色会挡住你的路，但你可以尝试将颜色近似到整体背景。 Translated text: 很遗憾，设置在div.image上的背景色会挡住你的路，但你可以尝试将颜色近似到整体背景。 - schellmax