如何解决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属性。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。