IE7層状PNG画像の周りに「ジャギー」

Question

Iは、（具体的には、丸い境界としてアンチエイリアスエッジと、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

<a href="#" id="dbc_main-letsgo" class="mf_fader"> 
    <div></div><div></div> 
</a> 

私はので、多分、私がこだわっている、それはIEの貧しいPNGのサポートとは何かだと仮定しています。

Answer 1

悲しいことに、これはPNG画像をサポートしているのIE 7のラメの試みに関係しています。 6の壮大な失敗で、MSは7でサポートを約束し、それはいくぶん落ちました。

ここでgifまたは8ビットPNGを使用してより良い結果を得ることができます。

IE 7のブラウザチェックを行い、7が検出されたらフェードとは対照的に表示を非表示に切り替えます。

希望に役立ちます。

Answer 2

IEで透明なPNGに不透明/フェードなどを使用するたびに、私はまったく同じことになります。

また、私は同じ問題を抱えている多くのサイトを訪問しました。 jqueryエキスパートであることを誇っている人々が、透明なPNGで同じ問題を抱えているのを見ると、気分が良くなります。

私が知る限り、IEの問題です。黒い枠線なしでIEのTrans pngで不透明度をアニメーション化する方法を見つけたら...投稿してください。私はoccassionsのカップル上に持っていた

は、表示/非表示効果にフェード効果から行く

Answer 3

これはIEの不良なPNGサポートによるものです。

これを修正するには、透明なPNGの背後にある背景が単色であれば、png画像の背景色属性でdiv要素を指定することができます。