1

私は、「氷の雲」のイメージで背景を使用しました.fadeTo()関数を使用して、消えてからjQueryで再び現れます。背景画像は.pngであるため、SO Windows XPでIE8を使用すると、背景画像が黒/灰色で縁取られており、透明が完璧ではないように見えますが、他のブラウザーを使用している場合は「氷の雲」は正常です。IE8にあるこの透過的な非互換性を解決できるプラグインjQueryまたはcssフィルターがあるかどうかはわかります。

html:

<div class="ice"></div>

CSS:

#main #slogan #iphone .ice {
    position:absolute;
    top:20px;
    right:22px;
    display:block;
    width:450px;
    height:486px;
    background:transparent url(../images/system/main-animation-ice.png) no-repeat 0 0;
    z-index:1;
}

JavaScript:

$(o).delay(i*'1200').fadeTo(2000,1.0).fadeTo(2000,0.2);

左側は通常の効果、右側は IE8 のバグです。

ここに画像の説明を入力

4

2 に答える 2

2

IE独自のフィルタリングシステムを使用して、CSSでそれを行うことができます。

 #main #slogan #iphone .ice {
     position:absolute;
     top:20px;
     right:22px;
     display:block;
     width:450px;
     height:486px;
     background:url(../images/blank.gif), transparent url(../images/system/main-animation-ice.png) no-repeat 0 0;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='../images/system/main-animation-ice.png');
     z-index:1;
 }

背景宣言の「最初の」画像にはblank.gifを使用する必要があります。これは単にie8を混乱させ、フィルターと設定した背景の両方を使用しないようにし、フィルターのみを使用するためです。他のブラウザは複数の背景画像をサポートしており、背景宣言を理解し、フィルタを理解しないため、背景のみを使用します。

また、フィルターを希望どおりに機能させるために、フィルターを操作する必要がある場合もありsizingMethodます。

アップデート

私はあなたのサイトをie8でチェックアウトしましたが、この投稿で述べたよりも多くの問題があります。

まず、のオーバーライドを含めなかったbackground : noneため、ie8は現在、フィルターバージョンと壊れたバックグラウンドバージョンの両方を提供しています。

次に、それを背景画像として使用しているだけでなく、スプライトとして使用しています。アルファイメージローダーでスプライトを使用することはできません。背景位置プロパティがないためです。したがって、背景位置を使用して切り替えるのではなく、3つの画像に分割し、フィルターでそれらを切り替える必要があります。

3番目のアニメーションのパフォーマンスはひどいです。ie8に、6つの透明な画像の不透明度を同時に変更するように要求しています。alphaImageLoaderを使用しても、これにより誰かのブラウザがクラッシュします。

私のアドバイス。ie8の場合$('.ice').hide();

ただし、IE8でpngを修正するこの方法は、 http： //jsfiddle.net/ZSYbU/2/で機能します。

于 2012-08-06T20:59:49.613 に答える
0

IE 8 でこの不透明度アニメーションの問題を回避する方法があるとは思いません。あるならぜひ習いたいです。

于 2012-08-06T20:57:33.360 に答える