26

ライトボックスに適用しているCSSオーバーレイを使用して、IEでこの奇妙な問題が発生しています。基本的に、私はjqueryにfadeinとを使用します。問題は、 を除いてすべて正常に動作することです。fadeoutIE

IEでは、フェードインは発生しません。むしろ、不透明な背景にまっすぐ進みます。

フェードアウト時 - オーバーレイを削除する前に、1 秒未満の間「不透明度」を削除し、ページを「単色」にレンダリングします。

このバグを修正する方法を知っている人はいますか? それは本当に迷惑です-私はすべての正しいフィルターなどを使用していますが、IEのフェードインとフェードアウトだけですか?

4

8 に答える 8

48

IE8でも同じ問題がありました。fadeIn() を呼び出す前に JavaScript で DIV の不透明度を設定すると、問題が解決しました。

$('.overlay').css('filter', 'alpha(opacity=40)');
$('.overlay').fadeIn(500);

これは、透明な PNG ではなく、単なる DIV を使用していました。

于 2009-08-24T14:04:29.930 に答える
6

多分これはあなたにとって良い解決策ですか（私にとってはそうです）。解決策はシンプルですが効果的です (そしてとてもいいです)。IE の親の背景に色がない場合 (完全な透明度)、アルファ透明度に問題があります。

ここで行うこと (以下の例を参照) は、ほとんど透明な (目には透明な) div を最初に追加することです。これはキャンバス/コンテナー内の最初の div (=> div など) であり、絶対的に配置されるため、この div の後のすべてのコンテンツは最初の div の上に配置されるため、これが他のすべてのコンテンツの背景になります。このキャンバスの中に。

現在は背景があるため、フェード インまたはフェード アウト (不透明度を変更する場合) 時、またはキャンバスの不透明度を 100 未満の値に設定する場合、IE は厄介な黒い点 (ピクセル) または黒い領域を表示しません。

方法 - 100x100 画像の例:

<div id="mycanvas" style="display:none;">
<div style="position:absolute; background:#FFF; display:block; filter:alpha(opacity=1); opacity:0; width:100px; height:100px;">
</div>
<img id="myImage" src="example.png" width="100" height="100"/>
</div>

jQuery を使用して画像をフェードインまたはフェードアウトするには:

    $("#mycanvas").fadeIn("slow", function() 
{setTimeout(function(){$("#mycanvas").fadeOut("slow");},2000 );}
);

これも可能です：

$("myImage").fadeIn("slow");

それでおしまい！

良いことに、このソリューションは VML/SVG (Raphael) やその他のアルファ透過性を持つコンテンツでも機能します。また、この「ハック」は他のブラウザーに影響を与えないため、JS コードを変更/ハッキングする必要はありません。

それが役に立てば幸い。

于 2010-01-27T19:48:39.457 に答える
0

この問題を観察した状況では、@Erwinusで概説されている方法を使用して部分的に修正することができました。その技術を使用すると、ハローははるかに醜くなりませんでしたが、奇妙な黒いオーラがまだ見られました。

画像自体に背景を適用することができましたが、

#slideshow img{background:#FFF url("image/background-of-slideshow.jpg") no-repeat -15px -35px;}

そして、これで問題は完全に修正されました。条件付きコメントを介して含まれているiefix.cssファイルに貼り付けました。それは余分なHTMLを必要とせず、他のソリューションよりもさらに優れたフェード効果を提供しました。

これは明らかにすべての場合の解決策であるとは限りませんが、私の場合は実行可能であり、うまく機能しました。

于 2010-07-22T20:23:50.833 に答える
0

また、このジャンクブラウザを使用する可能性があります。

を使用する代わりに、ブラウザがIEであるかどうかを確認することもできます。.animate({opacity:0})を使用する必要があります.animate({opacity:'hide'})。

于 2009-10-19T09:13:22.717 に答える
0

わかりました。これに問題があり、オンラインで見つけた解決策はどれも機能しませんでした。W3Cサイト（ http://www.w3schools.com/Css/css_image_transparency.asp ）を見ると 、IE8で機能していたので、私は夢中になりました。しかし、私はそれを私の開発環境にコピーしません。

私はこのコードを持っていました：

 <script type="text/javascript">
       $(document).ready(function() {
        $('.disabled').fadeTo("slow", 0.33);
  });
 </script>

そしてこのマークアップ：

    <a href='homestarrunner.com' class='disabled'>
<img src='http://www.w3schools.com/Css/klematis.jpg' /></a>

それはFF、Chrome、すべてがIE8で機能しました。

最終的に気付いたのは、ローカルホストに対して実行しているときにIE8がスクリプトを適用していなかったことです。このコードをウェブホストとBAM！にコピーしましたが、完全に機能します。IE8がこれを行う理由はわかりませんが、開発者がIEを嫌うもう1つの理由だと思います。

多分それは私だけです。

于 2011-01-20T20:15:10.743 に答える
0

正確なコードなしではわかりませんが、IEには要素にフェードを適用する際に問題があることを知ってposition: relativeいます。そのため、私があなたである場合、直接または親を介してフェードしようとしている要素がposition: relative適用されているかどうかを確認します。それが役に立てば幸い。

于 2009-12-09T22:21:44.050 に答える
0

@LoveMeSomeCode（誰かのメッセージに応答できるので、stackoverflowはXの評判が必要だと考えているようなので、あなたの投稿に直接返信することはできません-なぜですか?!?!）これは、IE8の「互換性ビュー」（はい、モード自体よりもさらに不十分です）。

私が仕事で開発した Web サイト (IE を使用している場合) を表示すると、人々があらゆる種類の奇妙な動作をしていることに気付きました。いくつか遊んだ後、IE8 には、すぐに使用できるすべてのローカル ページを互換ビューで表示するように設定する設定があることを発見しました。ドキュメント宣言やマークアップの厳格さに関係なく、IE8 はすべてのイントラネット ページに互換性ビューを使用します (localhost も同じだと思います)。

[ツール] > [互換表示設定] をクリックし、[イントラネット サイトを互換表示で表示する] ボックスのチェックを外します。

いったいなぜこれがデフォルトで有効になっているのか私にはわかりませんが、隔離してから人々に修正するように伝えるのに非常に手間がかかりました.

于 2011-02-09T13:36:35.443 に答える
0

これは、この問題に対する別の潜在的な修正です... jQueryには、CSSを介して設定された不透明度の検出に関するいくつかの問題（1.4より前？）があると思われます。不透明度 (fadeIn、fadeOut、fadeTo、および animate) をアニメーション化する前に、jQuery を使用して要素の不透明度を設定すると、問題がないように見えます。のように、CSS をサポートするブラウザの不透明度を設定し、jQuery を使用して不透明度を設定すると、IE で適切に動作するはずです。表示なしの場合も同様です。

例：

$('#element').css("opacity","0").fadeIn("slow");

ソース: http://www.boagworld.com/forum/comments.php?DiscussionID=3555#Item_3

于 2010-08-09T08:45:56.113 に答える