Remarque : BUG indiquant que les méthodes fadeIn et fadeOut de jquery échouent sous IE-js tutoriel-php.cn

Remarque : BUG indiquant que les méthodes fadeIn et fadeOut de jquery échouent sous IE

巴扎黑

Libérer： 2017-06-30 10:45:38

original

1314 Les gens l'ont consulté

BUG1 :Positionnement absoluPositionnement absolu imbriqué

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>

Copier après la connexion

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

Copier après la connexion

<p>

Copier après la connexion

posab est une classe à positionnement absolu

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

测试测试测试

Copier après la connexion

La position spécifique nécessite quelques ajustements

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

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>

Copier après la connexion

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

BUG3 :

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

Regardons un exemple premier


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

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

Copier après la connexion

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

Mais la réalité est cruelle, et votre structure HTML ne le sera certainement pas simple.

Ajoutons un petit quelque chose

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

Copier après la connexion


    

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

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

Copier après la connexion

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

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 :

1, sans position : relative ; Cela peut parfois se faire

2, si 1 n'est vraiment pas possible, par exemple, l'auteur a rencontré Si alors, 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

Nous voulons obtenir cet effet sans utiliser position:relative sans utiliser each(), est-ce que ça va ?

Oui !

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

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

Copier après la connexion

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

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

Copier après la connexion

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

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!