IE7和“jaggies”围绕分层PNG（与jQuery） [英] IE7 and "jaggies" around layered PNGs (with jQuery)

问题描述

我似乎在PNG档案周围遇到「jaggies」（锯齿状像素化，这种情况下是黑色的），特别是使用反锯齿边缘，例如圆角边框（按钮例如）在 IE7 中。我想我之前遇到过这个问题，但是在以前的设计中可能没有这么明显。

这是只有当我淡入PNG

某些问题来自于，但是这里是涉及的代码的简单转储;

jQuery

  $（document）.ready（function b $ b $（'。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-letsgoclass =mf_fader> 
< div>< / div>< div>< / div> 
< / a> 
  

我假设它与IE的可怜的PNG支持有关，所以也许我被卡住了。

解决方案

很遗憾，这与IE 7在支持PNG时的失败有关。有了6的史诗失败，MS承诺在7的支持，有点过去。

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

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

希望有帮助。

I seem to be experiencing "jaggies" (jagged pixelation, black in this case) around PNG files, specifically with anti-aliased edges such as rounded borders (say, a large glossy button for example) in IE7. I think I've experienced this issue before, however it may not have been as obvious in a previous design.

Thing is, it only appears when I fade the PNG (and in this case, fade in another for a snazzy rollover effect) because initially, it appears fine.

Anyways, I'm not too certain where the issue stems from, however here is a brief dump of the involved code; hopefully there's a resolution.

Screen
Before and after respectively

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>

I'm assuming it's something to do with IE's poor PNG support, so maybe I'm stuck.

解决方案

Sadly this has to do with IE 7's lame attempt at supporting PNGs. With the epic fail of 6, MS promised support in 7 and that somewhat fell through.

You can use a gif or an 8 bit PNG here though and get better results.

What I do is make a browser check for IE 7 and if I detect 7 I then switch to hide show as opposed to fades.

Hope that helps.

这篇关于IE7和“jaggies”围绕分层PNG（与jQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！