IE7 和“锯齿”围绕分层 PNG（使用 jQuery）

Question

我似乎在 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 支持有关，所以也许我被困住了。

Answer 1

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

另外，我访问过很多有同样问题的网站。当我看到自夸是 jquery 专家的人在他们的透明 png 上有同样的问题时，这让我感觉好多了。

据我所知是IE的问题。如果您找到一种方法可以在 IE 中为 Trans png 制作不透明度动画而没有黑色边框...请发帖。

有几次我不得不从淡入淡出效果变为显示/隐藏效果

Answer 2

遗憾的是，这与 IE 7 在支持 PNG 方面的蹩脚尝试有关。随着6的惨败，MS承诺在7中提供支持，但多少落空了。

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

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

希望有帮助。

Answer 3

是的，这是由于 IE 对 PNG 的支持较差。

解决此问题可以轻松解决的一件事是，如果透明 png 后面的背景是纯色，则也可以为 div 元素提供 png 图像背景颜色属性。