BUG selon lequel les méthodes fadeIn et fadeOut de jquery échouent sous IE

<p>BUG1 :Positionnement absoluPositionnement absolu imbriqué

<p>J'ai rencontré ce problème plusieurs fois, car je n'ai pas pris de notes, donc à chaque fois je rencontrais ce problème problème Il faut une demi-journée pour étudier. Il est absolument vrai qu’une bonne mémoire est pire qu’une mauvaise écriture.

<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 est une classe à positionnement absolu

<p>tant que le positionnement absolu est remplacé par float, Vous pouvez obtenir l'effet de fondu entrant et sortant.

      

           
 
  
           

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

       
       

　　　　

           
 
  
           

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

       
       

<p>

<p> La position spécifique nécessite quelques ajustements

<p>BUG2 : Positionnement absolu parent des images imbriquées qui sont plus grandes que la taille parent

<p>Il existe une autre situation, qui est un BUG propre à IE8. Le format est le suivant

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

<p> Si la taille de l'image dépasse la taille. taille de p, dans L'effet de fondu sera invalide sous IE8

<p>BUG3 :

<p>Il y a un bug sur Internet que je n'ai pas rencontré en détail. Je vais le poster maintenant :

IE6 IE7 IE8 fadeIn() fadeOut() solution de bug lorsque position : relative

<p>Regardons un exemple premier

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

    


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

<p>

<p>Le code ci-dessus peut essentiellement atteindre les résultats escomptés dans tous les navigateurs grand public

<p>Mais la réalité est cruelle, et votre structure HTML ne sera certainement pas celle simple.

<p>Ajoutons un petit quelque chose

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

    

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

    


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

<p>À ce moment-là, des choses comme papa apparaîtront dans IE 6 78. Animation N'apparaît pas ? Est-il possible de le montrer directement ?

<p>Il s'agit d'un bug notoire d'IE : si le sous-élément de l'élément fadeIn a un attribut de position, la valeur relative est la plus grave. Les éléments avec un attribut de position n'auront pas l'effet de fadeIn !

Solutions de courbe possibles :

<p>1, sans position : relative ; Bon, parfois cela peut être fait

<p>2, si 1 n'est vraiment pas possible, par exemple, l'auteur rencontré Si c'est le cas, utilisez each(). Vous pouvez faire cet effet un par un. Bien sûr, cela peut être fait, mais l'efficacité est trop faible et cela pourrait bloquer l'ordinateur de l'utilisateur. Par exemple, dans la situation que j'ai rencontrée, il y a des dizaines ou des centaines de sous-éléments. Cette méthode est des dizaines de milliers de fois. Ne laissez rien arriver. .

Solution ciblée

<p>Nous devons obtenir cet effet en utilisant position:relative sans utiliser each(), est-ce que ça va ?

<p>Oui !

<p>Comme il s'agit d'un bug, il doit y avoir une méthode de hack

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

<p>Changer dynamiquement l'attribut position en relatif avant fadeIn(); ce bug sous IE7 sera résolu

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

<p>Ajouter filter:herit; aux éléments dont les éléments enfants ont l'attribut position.Ajoutez également filter:herit; aux éléments enfants de premier niveau de l'élément actuel.
Une fois ces deux combinés, les problèmes d'IE678 seront résolus

<p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!