IE7和分层PNG周围的“jaggies”（使用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图像background-color属性。