IE7 和分层 PNG 周围的“锯齿”（使用 jQuery）答案

【问题标题】：IE7 and "jaggies" around layered PNGs (with jQuery)IE7 和分层 PNG 周围的“锯齿”（使用 jQuery）
【发布时间】：2011-09-21 15:32:50
【问题描述】：

我似乎在 PNG 文件周围遇到“锯齿”（锯齿状像素化，在这种情况下为黑色），特别是带有抗锯齿边缘，例如圆形边框（比如说，一个大的光泽IE7 中的按钮，例如）。我想我以前遇到过这个问题，但是在以前的设计中可能没有那么明显。

问题是，它仅在我淡化 PNG 时出现（在这种情况下，淡入另一个以获得时髦的翻转效果），因为最初它看起来很好。

无论如何，我不太确定问题出在哪里，但这里是相关代码的简要转储；希望有一个解决方案。

屏幕
前后分别

jQuery

$(document).ready(function(){
    $('.mf_fader').hover(function(event){
        $('> *:first-child', $(this)).stop().fadeTo(450, 0);
        $('> *:last-child', $(this)).stop().fadeTo(350, 1);
    }, function(event){
        $('> *:first-child', $(this)).stop().fadeTo(350, 1);
        $('> *:last-child', $(this)).stop().fadeTo(450, 0);
    });
});

CSS

#dbc_main-letsgo,
#dbc_main-letsgo > div{
    width: 460px;
    height: 150px;
}

#dbc_main-letsgo > div{ background-image: url(../img/btn_main-letsgo-default.png); }
#dbc_main-letsgo > div + div{ background-image: url(../img/btn_main-letsgo-hover.png); }

.mf_fader{
    position: relative;
    display: inline-block;
}

.mf_fader > *{
    position: absolute;
}

.mf_fader > * + *{
    display: none;
}

HTML

<a href="#" id="dbc_main-letsgo" class="mf_fader">
    <div></div><div></div>
</a>

我假设这与 IE 对 PNG 的支持不佳有关，所以也许我被卡住了。

【问题讨论】：

我们可以提供截图或链接吗？
哦，当然；等待更新。
另外，刚刚意识到（正在另一台机器上测试）IE8也是如此。

标签： jquery css png transparency antialiasing

【解决方案1】：

每次我在 IE 中对透明 PNG 使用不透明度/淡入淡出等时，都会得到完全相同的结果。

另外，我访问过许多有同样问题的网站。当我看到那些吹嘘自己是 jquery 专家的人在他们的透明 png 上遇到同样的问题时，我感觉好多了。

据我所知，这是一个 IE 问题。如果您找到一种方法可以在没有黑色边框的情况下在 IE 中对 Trans png 的不透明度进行动画处理...请发帖。

我不得不在几个场合从淡入淡出效果变成显示/隐藏效果

【讨论】：

谢谢kdub；我还假设这是一个 IE 问题，特别是 PNG 渲染。他们是最后一个采用 PNG alpha 通道支持的，不是吗？
浏览器无法同时管理透明 PNG 的合成以及图像上的任何不透明效果。换句话说，对于任何给定的像素，您要么从 PNG 本身获得 alpha 通道效果，要么从不透明度过滤器获得或，但不能同时获得两者。

【解决方案2】：

遗憾的是，这与 IE 7 支持 PNG 的蹩脚尝试有关。由于 6 的史诗般的失败，MS 承诺在 7 中提供支持，结果有点落空了。

您可以在此处使用 gif 或 8 位 PNG 并获得更好的结果。

我所做的是让浏览器检查 IE 7，如果我检测到 7，然后切换到隐藏显示而不是淡入淡出。

希望对您有所帮助。

【讨论】：

谢谢NgM；我怀疑我可以使用 GIF 或 8 位 PNG 获得更好的结果，因为抗锯齿边缘是我想要的。不过，它并不可怕碍眼，所以我会忍受它。

【解决方案3】：

是的，这是由于 IE 对 PNG 的支持不佳。

您可以轻松解决这个问题，如果透明 png 背后的背景是纯色，您也可以为 div 元素赋予 png 图片背景颜色属性。

【讨论】：