Hinweis: Fehler, dass die FadeIn- und FadeOut-Methoden von jquery unter IE fehlschlagen

<p>BUG1:Absolute PositionierungVerschachtelte absolute Positionierung

<p>Ich bin schon oft auf dieses Problem gestoßen, weil ich mir keine Notizen gemacht habe, also stieß ich jedes Mal darauf Problem Das Lernen dauert einen halben Tag. Es ist absolut wahr, dass ein gutes Gedächtnis schlechter ist als ein schlechtes Schreiben.

<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 ist eine absolut positionierte Klasse

<p>solange die absolute Positionierung durch float< ersetzt wird 🎜>, Sie können den Effekt des Ein- und Ausblendens erzielen.

      

           
 
  
           

                
测试测试测试
                
测试测试测试
                
测试测试测试
           

       
       

　　　　

           
 
  
           

                
测试测试测试
                
测试测试测试
                
测试测试测试
           

       
       

<p>

Die spezifische Position erfordert einige Anpassungen<p>

<p>BUG2: Übergeordnete absolute Positionierung verschachtelter Bilder, die größer als die übergeordnete Größe sind

Es gibt eine andere Situation, bei der es sich um einen für IE8 einzigartigen Fehler handelt. Das Format ist wie folgt:<p>

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

Wenn die Größe des Bildes die überschreitet Größe von p, in Der Ausblendeffekt ist unter IE8 ungültig<p>

<p>BUG3:

Es gibt einen Fehler im Internet, auf den ich nicht im Detail gestoßen bin. Ich werde es jetzt posten:<p>

IE6 IE7 IE8 fadeIn() fadeOut() Fehlerlösung, wenn Position : relativ

Sehen wir uns ein Beispiel an Erstens<p>

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

    


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

<p>

Der obige Code kann grundsätzlich die erwarteten Ergebnisse in allen Mainstream-Browsern erzielen <p>

Aber die Realität ist grausam, und Ihre HTML-Struktur wird das sicherlich nicht sein einfach. <p>

Fügen wir noch etwas hinzu<p>

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

    

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

    


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

Zu diesem Zeitpunkt werden Dinge wie Papa in IE 6 78 erscheinen. <p>Animation Erscheint nicht? Ist es möglich, es direkt anzuzeigen?

Dies ist ein berüchtigter IE-Fehler: Wenn das Unterelement des FadeIn-Elements ein Positionsattribut hat, ist der relative Wert am schwerwiegendsten. Elemente mit einem Positionsattribut haben nicht die Wirkung von FadeIn! <p>

Mögliche Kurvenlösungen:

1, ohne Position: relativ; Dies kann manchmal durchgeführt werden <p>

2, wenn 1 wirklich nicht möglich ist, zum Beispiel ist der Autor auf If gestoßen Verwenden Sie also every(). Sie können diesen Effekt natürlich einzeln ausführen, aber die Effizienz ist zu gering und der Computer des Benutzers kann zum Beispiel hängen bleiben. Diese Methode gibt es Zehntausende Male. Lassen Sie nicht zu, dass etwas passiert. . <p>

Gezielte Lösung

Wir müssen diesen Effekt erzielen, indem wir position:relative verwenden, ohne every() zu verwenden. Ist das in Ordnung? <p>

Ja! <p>

Da es sich um einen Fehler handelt, muss es eine Hack-Methode geben<p>

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

Ändern Sie das Positionsattribut dynamisch in relativ, bevor fadeIn(); dieser Fehler wird unter IE7 behoben<p>

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

Filter hinzufügen: inherit; zu den Elementen, deren untergeordnete Elemente das Positionsattribut haben. Fügen Sie außerdem filter: inherit zu den untergeordneten Elementen der ersten Ebene hinzu. <p>Sobald diese beiden kombiniert werden, werden die Probleme von IE678 gelöst

<p>

Das obige ist der detaillierte Inhalt vonHinweis: Fehler, dass die FadeIn- und FadeOut-Methoden von jquery unter IE fehlschlagen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!