Hinweis: Fehler, dass die FadeIn- und FadeOut-Methoden von jquery unter IE fehlschlagen-js-Tutorial-php.cn

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

巴扎黑

Freigeben： 2017-06-30 10:45:38

Original

1315 Leute haben es durchsucht

BUG1:Absolute PositionierungVerschachtelte absolute Positionierung

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

<p>

Nach dem Login kopieren

posab ist eine absolut positionierte Klasse

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

测试测试测试

Nach dem Login kopieren

Die spezifische Position erfordert einige Anpassungen

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

Nach dem Login kopieren

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

BUG3:

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

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

Sehen wir uns ein Beispiel an Erstens


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

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

Nach dem Login kopieren

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

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

Fügen wir noch etwas hinzu

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

Nach dem Login kopieren


    

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

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

Nach dem Login kopieren

Zu diesem Zeitpunkt werden Dinge wie Papa in IE 6 78 erscheinen. 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!

Mögliche Kurvenlösungen:

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

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

Gezielte Lösung

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

Ja!

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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. Sobald diese beiden kombiniert werden, werden die Probleme von IE678 gelöst

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!