&l"/>

&l">

ホームページ  >  記事  >  ウェブフロントエンド  >  jquery の fadeIn および fadeOut メソッドが IE で失敗するバグ

jquery の fadeIn および fadeOut メソッドが IE で失敗するバグ

巴扎黑
巴扎黑オリジナル
2017-06-29 11:55:231473ブラウズ
<p>BUG1:絶対位置決めネストされた絶対位置決め

<p>私はこの問題に何度も遭遇しました。メモを取っていなかったので、毎回この問題を半日勉強しなければなりませんでした。良い記憶力は悪い文章よりも悪いというのは絶対に真実です。


<p id="show_list">
      <p class=""  val="0">
           <p class=" posab" style="top:50px; left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></p>  
           <p  class="posab alce"  style="top:200px; width:260px; left:80px;">
                <p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;">测试测试测试</p>
                <p class=" f14 l22 alce" style="color:#e99417;">测试测试测试</p>
                <p class="lk444 f14  l22 alce" style="margin-top:5px;">测试测试测试</p>
           </p>
       </p>
    <p class=""  val="0">
           <p class=" posab" style="top:50px; left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></p>  
           <p  class="posab alce"  style="top:200px; width:260px; left:80px;">
                <p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;">测试测试测试</p>
                <p class=" f14 l22 alce" style="color:#e99417;">测试测试测试</p>
                <p class="lk444 f14  l22 alce" style="margin-top:5px;">测试测试测试</p>
           </p>
       </p>
<p>
<p>posab は絶対位置決めクラスです

<p>絶対位置決めが floating に置き換えられている限り、フェードインおよびフェードアウトの効果を実現できます。


测试测试测试

测试测试测试

测试测试测试

    

测试测试测试

测试测试测试

测试测试测试

<p>
<p> 特定の位置を調整する必要があります

<p>バグ 2: 親の絶対配置により、親サイズよりも大きい画像がネストされます

<p>別の状況があり、これは IE8 固有のバグであり、形式は次のとおりです


 <p class=" posab" style=" top:80px; left:260px;width:550px;height:55px">
  <img class="png_bg" src="image.jpg" />
</p>
<p> 画像のサイズが p のサイズを超える場合、IE8 ではフェードアウト効果が無効になります

<p>バグ 3:

<p> インターネット上にバグがあります。私はそれに遭遇していません。具体的には、今すぐ投稿します:

IE6 IE7 IE8 fadeIn() fadeOut() position :relative のバグ解決方法

<p>まず例を見てみましょう

<p> <p>I am going to fade in ;

<p>I am going to fade in ;

$('.fadein').fadeIn();
<p>

<p> 上記のコードは、基本的に期待どおりの結果を達成できます。すべての主流ブラウザで結果が得られます

<p> しかし、現実は残酷です。もちろん、すべての人の HTML 構造はそれほど単純ではありません。

<p>ちょっと追加しましょう

<style>
.relative{position: relative;}
</style>

<p>I am going to fade in ;

<p>I am going to fade in ;

$('.fadein').fadeIn();
<p>この時、IE 6 78ではパパみたいなのが出てきますが、アニメーションはそのまま表示しても大丈夫でしょうか?

<p>これは悪名高い IE のバグです。fadeIn 要素の子要素にposition 属性がある場合、相対値が最も深刻です。position 属性を持つ要素には fadeIn の効果がありません。

可能な曲線の解決策:

<p>1、位置なし: 相対; これは場合によっては実行できます

<p>2. 著者が遭遇した状況など、1 が実際に不可能な場合は、 each() を使用します。 もちろん、このエフェクトを 1 つずつ実行することもできますが、効率が悪すぎて、たとえば、私が遭遇した状況では、数十または数百のサブ要素が存在する可能性があります。この方法は何万回も繰り返されます。 。

対象となるソリューション

<p> each() を使用せずに、position:relative を使用せずにこの効果を実現したいのですが、大丈夫ですか?

<p>はい!

<p>これはバグなので、ハックメソッドが必要です

$(&#39;.fadein&#39;).css(&#39;position&#39;, &#39;relative&#39;).fadeIn();
<p> fadeIn() の前に位置属性を相対に動的に変更すると、IE7 でのこのバグは解決されます

<style>
.relative{position: relative; filter: inherit}
</style>
<p> 子要素に位置属性がある場合、フィルターを追加するとき: 要素に継承するには、現在の要素の第 1 レベルのサブ要素も追加する必要があります。
この2つを組み合わせると、IE678の問題は解決されます

<p>

以上がjquery の fadeIn および fadeOut メソッドが IE で失敗するバグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。