IE7和分层PNG周围的“锯齿”使用jQuery

问题描述

| 我似乎在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\',1);
        $(\'> *:last-child\',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支持有关，所以也许我陷入了困境。     

解决方法

        可悲的是，这与IE 7支持PNG的la脚尝试有关。由于史诗般的失败6，MS承诺在7中提供支持，但此失败。 您可以在此处使用gif或8位PNG，以获得更好的结果。 我要做的是让浏览器检查IE 7，如果检测到IE 7，则切换为隐藏显示而不是淡入淡出。 希望能有所帮助。     ,        每次我在IE中的透明PNG上使用opacity / fades等时，我都会得到完全相同的结果。 另外，我访问了许多存在相同问题的站点。当我看到那些自夸为jquery专家的人的透明png遇到相同的问题时，这让我感觉更好。 据我了解，这是一个IE问题。如果您在IE中找到了一种在Trans png上设置不透明度动画的方法而没有黑色边框...请发表。 我不得不在几次场合中从淡入淡出效果变为显示/隐藏效果     ,        是的，这是由于IE对PNG的支持不佳所致。 解决此问题的一件事很容易，就是如果透明png背后的背景是纯色，则还可以为div元素提供png image background-color属性。