使用 jquery fade 悬停在 IE 资源管理器中将 PNG 周围黑色

Question

当我在 Internet Explorer 中使用 Fadein jquery 效果时，我搜索了一整天并尝试了一切方法来去除 PNG 周围的黑色。我一定错过了一些东西，因为我使用的所有代码都不能修复它。我的页面可以在这里访问：http://www.kaimeramedia.com/derek/Website

我找到了这段代码：

.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 */
    zoom: 1;
}

但我无法让它与我的菜单页面一起使用（ http://www.kaimeramedia.com/derek/Website/menu.php）仅在index.php模板中看起来正确。

图像在所有浏览器中都可以很好地淡入淡出，只是 IE 6+ 在图像周围添加了非常粗的黑色边框。我知道有很多网站讨论这个问题，但我没有任何运气，或者至少我输入的代码一定是错误的。

我尝试编辑 CSS 和下面的样式标签，但似乎没有任何效果：

div.fadehover {
     position: relative;
}

img.b {
     position: absolute;
     left: 0;
     top: 0;

     z-index: 10;
     opacity: 0;
     filter: alpha(opacity=0);
     background: transparent;
}

.style2 {   font-style: italic;     color: #2D6773; }
.style3 {   color: #122833 }

如果有人可以帮助我为我的网站提供可行的解决方案，我将非常感激。

Answer 1

这个问题有很多解决方案：
1) 使用 PNG8 代替
2) 使用js脚本，例如Unit PNG Fix
3) 尝试将 filter: 0 添加到您的图像
4）使用ie过滤背景模拟rgba（255,255,255,0）

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

5）最后，如果不需要透明度，只需使用jpg

编辑：这是其中一张图像在png8中的样子，我不知道没有看到任何重大差异...

Answer 2

我遇到了完全相同的问题，这是由 IE 需要的 css 过滤属性引起的。在我的动画中我删除了这个属性。

$('elem').css('filter', '');

旧的 IE 根本无法执行。你可以用 JavaScript 来“破解”许多 IE 的缺陷，但只会导致这些浏览器的运行速度更加缓慢。

最好的解决方案是优雅降级和渐进增强（更多内容请参见 http ://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/）。不要让IE做它不能做或不能做好的事情。我知道客户很难理解这一点，但我尝试成为魔术师的日子已经结束了。