5

CSSコード：

#btn{
  background: url(transparent.png) no-repeat;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

JavaScript / jQuery：

$("#btn").animate({opacity:1,"margin-left":"-25px"});

Firefox、Chromeなどの上記のコードに問題はありません。ただし、InternetExplorerのどのバージョンでも機能しません。

問題は、PNG画像が奇妙にレンダリングされ、透明なPNGの背景が黒く見えることです。不透明効果を取り除いても問題ありません。

解決策は何ですか？

4

10 に答える 10

11

私にとっては、jQueryの.animate（）関数に空白の値を持つフィルタープロパティを含めるだけで機能しました

多分これはあなたのためにも働くでしょう。

$("#btn").animate({opacity:1,"margin-left":"-25px", filter:''});

さらに、ボタンのCSSからフィルタープロパティを削除する必要がある場合があります。

于 2010-11-21T11:29:40.170 に答える
7

filter:''ハックは現在のjQuery（1.6.1）では機能しなくなりました

于 2011-06-22T09:35:09.220 に答える
5

現在、私が知っているこれに対する解決策はありません。IEが世界の他の地域に追いつくのを待つ必要があります。私はほんの数日前の最近のプロジェクトでそのような機能を放棄しなければなりませんでした。残念ながら、IEがjQueryでフェードインおよびフェードアウトするフェザーエッジPNGを使用することはできません。

于 2010-03-04T03:40:35.123 に答える
4

ねえ、サンプソンが間違っていたようです。これに関するDaveSheaの投稿を参照してください：http：//mezzoblue.com/archives/2010/05/20/ie8_still_fa/

ここでは、ソリューションの3つの段落をダンプします。

もちろん、IEのバージョンはまだCSS不透明度プロパティをサポートしていないため、jQueryは代わりにIE独自の AlphaImageLoaderフィルターを利用して不透明度を適用します。これが（一見よく知られている）バグの根本的な原因になります。推奨される修正は、代わりに親要素に透明度を適用することですが、その回避策ではほとんど成功していません。

動作したのは、の代わりにVMLを介してPNG透過性を適用する DD_belatedPNGと呼ばれる小さなライブラリでしたAlphaImageLoader。IE6用に設計されていますが、IE7でも問題なく動作します。IE8の場合、この特定のページでX-UA互換 metaタグを破棄し、IE8をIE7モードにステップダウンすることを余儀なくされました。

それはまだ完璧ではありません。IEのすべてのバージョンで、ホバー効果をわずかに調整しなければならない、低い不透明度で突き抜けているかすかな白いバウンディングボックスに気づきました。しかし、あなたは知っています、それでも、それは十分に良いことです。

うーん...この質問が6か月前に行われたときに、このソリューションがポップアップしなかったのは奇妙なことです。確かに、このブログ投稿は存在しませんでしたが、解決策はかなり前から存在していました。誰も気づかなかったのは不思議です...

于 2010-08-31T10:07:50.530 に答える
2

ここに本当の解決策があると思います： http ：//www.viget.com/inspire/jquery-ie-png-24-ie-black-background-issue-solved/

私の場合、背景が透明なアニメーションpng画像の恐ろしい黒のbgを解決しました。それは魅力のように機能しました。ie7+でテストしました。今のところie6をテストできません。

それがすべての人に役立つことを願っています:)ジュリアン

于 2011-08-03T14:39:01.823 に答える
2

最新のブラウザ（mozilla、Opera、Chromeなど）にはPNG画像を使用してください：

background:url(../images/banner01.png) no-repeat right 13px;

これをIEに追加します（別のCSSを使用するか、IEハックを使用します）

/* ie fix */
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/banner01.png",
 sizingMethod="crop");
于 2011-09-13T19:00:34.750 に答える
1

興味深い注意：jQueryTOOLSは、ツールチップのバグ修正として、すべてのIEバージョンでGIFを使用します。 デモ

于 2010-08-31T09:57:30.913 に答える
0

ここに修正があります！最新のjQueryに更新します。それでおしまい。その後は動作します。

于 2012-11-11T11:20:55.770 に答える
0

この問題を解決すると思われるライブラリがあります：jCSML。私はそれを試しましたが、IE7以降で透明なpngをアニメーション化するために機能します。

于 2012-05-24T19:32:06.013 に答える
0

ジュリアンの答えに感謝します、それは私を正しい方向に導きます！

ただし、画像の不透明度の遷移中に、テキストの周りにまだ灰色のハローが表示されていました。静止しているときは問題なく見えましたが、それでも奇妙なわずかな灰色のハロー（IE 8）が作成されていました。以下の値に変更して修正しました。

また、IE 8はプロパティの最後までその値を壊していたため、「zoom：1」プロパティを個別に宣言する必要がありbackgroundました。background-color: transparent; IEと同じことは最悪です。

私の作業CSS：

.classOfParentElement img {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#FFFFFFFF)"; /* IE 8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#FFFFFFFF); /* IE 6 & 7 */
}

.classOfParentElement img {
    -ms-zoom: 1;
    zoom: 1;
    background-color: transparent;
}

endColorstr=#00FFFFFFに変更する必要があることに注意してくださいendColorstr=#FFFFFFFF。

繰り返しになりますが、このソリューションはViget.comから提供されました。

于 2014-03-19T19:06:02.040 に答える