IE7和分层PNG周围的“jaggies”(使用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', $(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

  

我认为它与IE的糟糕PNG支持有关,所以也许我被卡住了。

遗憾的是,这与IE 7支持PNG的蹩脚尝试有关。 随着史诗般的失败6,MS承诺在7中获得支持并且有些失败。

你可以在这里使用gif或8位PNG,并获得更好的结果。

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

希望有所帮助。

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

此外,我访问了许多具有相同问题的网站。 当我看到那些吹嘘jquery专家的人在透明的png上有同样的问题时,这让我感觉更好。

据我所知,这是一个IE问题。 如果你找到一种方法来在没有黑色边框的IE中的Trans png上制作不透明度…请发布。

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

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

你可以做的一件事很容易就是,如果透明png背后的背景是纯色,你也可以给div元素添加png图像background-color属性。