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

<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>これはバグなので、ハックメソッドが必要です

$('.fadein').css('position', 'relative').fadeIn();

<p> fadeIn() の前に位置属性を相対に動的に変更すると、IE7 でのこのバグは解決されます

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

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

<p>

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