jquery の fadeIn および fadeOut メソッドが IE で失敗するバグ-jsチュートリアル-php.cn

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

巴扎黑

リリース： 2017-06-29 11:55:23

オリジナル

1512 人が閲覧しました

BUG1:絶対位置決めネストされた絶対位置決め

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

<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>

ログイン後にコピー

posab は絶対位置決めクラスです

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

测试测试测试

ログイン後にコピー

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

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

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

 <p class=" posab" style=" top:80px; left:260px;width:550px;height:55px">
  <img class="png_bg" src="image.jpg" />
</p>

ログイン後にコピー

画像のサイズが p のサイズを超える場合、IE8 ではフェードアウト効果が無効になります

バグ 3:

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

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

まず例を見てみましょう


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

$('.fadein').fadeIn();

ログイン後にコピー

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

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

ちょっと追加しましょう

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

ログイン後にコピー


    

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

$('.fadein').fadeIn();

ログイン後にコピー

この時、IE 6 78ではパパみたいなのが出てきますが、アニメーションはそのまま表示しても大丈夫でしょうか？

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

可能な曲線の解決策:

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

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

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

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

はい！

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

$(&#39;.fadein&#39;).css(&#39;position&#39;, &#39;relative&#39;).fadeIn();

ログイン後にコピー

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

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

ログイン後にコピー

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

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