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

我似乎遇到了“锯齿”（锯齿状像素化，黑色在这种情况下）周围的PNG文件，特别是与消除锯齿边缘，如圆角边框（说，例如）在IE7一个大光泽的按钮。我想我以前所经历的这个问题，但它可能没有那么明显在以前的设计。IE7和“锯齿”周围分层的PNG（使用jQuery）

事情是，它只出现在我褪色的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支持不好，所以我可能卡住。

来源

2011-06-23 Dan

我们可以有截图或链接来使用吗？ –

哦，当然;等待更新。 – Dan

此外，刚刚意识到（*正在另一台机器上测试*）** IE8 **也是如此。 – Dan

可悲的是这与IE 7的是支持PNG图片跛脚试图这样做。随着6的史诗般的失败，MS承诺在7日的支持，并有所下降。

虽然可以使用gif或8位PNG，但会获得更好的结果。

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

希望有所帮助。

来源

2011-06-23 23:28:21

谢谢** NgM **;我怀疑我能用GIF或8位PNG获得更好的结果，因为反锯齿边缘就是我要做的。但是，它不是*可怕的*眼睛，所以我会忍受它。 – Dan

每当我在透明PNG的IE上使用不透明/淡入淡出等时，我会得到完全一样的东西。

另外，我还参观了有同样的问题很多网站。这让我感觉更好，当我看到谁拥有jQuery的是专家对他们的透明的PNG同一个问题的人。

据我所知这是一个IE问题。如果你找到一个方法来设置动画跨PNG在IE的不透明度没有黑边......请留言。

我不得不一对夫妇occassions的从淡入淡出效果去显示/隐藏效果

来源

2011-06-23 23:20:04 kdub

谢谢** kdub **;我也假设，这是一个IE问题，特别是PNG渲染。他们是最后采用PNG alpha通道支持的，不是吗？ – Dan

浏览器不能同时管理透明PNG的合成和图像上的任何不透明效果。换句话说，对于任何给定的像素，您可以从PNG本身获取Alpha通道效果，或者从不透明度滤镜获取*或*，但不能同时获取这两种效果。 – Pointy

是的，这是由于IE糟糕的PNG支持。

你可以做的一件事是解决这个问题很简单，就是如果透明png背后的背景是纯色，那么你也可以给div元素设置png图像的background-color属性。

来源

2011-06-23 23:32:38 riku

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

回答

相关问题