BUG that jquery's fadeIn and fadeOut methods fail under IE

<p>BUG1:Absolute positioningNested absolute positioning

<p>I have encountered this problem many times, because I didn’t take notes, so every time I encountered this problem It takes half a day to study. It is absolutely true that a good memory is worse than a bad writing.

<p id="show_list">
      <p class=""  val="0">
           <p class=" posab" style="top:50px; left:260px;"> <img  class="png_bg lazy"  src="/static/imghwm/default1.png"  data-src="/uploads/productimage/164613_634717302959421250.png"    / alt="BUG that jquery's fadeIn and fadeOut methods fail under IE" ></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 lazy"  src="/static/imghwm/default1.png"  data-src="/uploads/productimage/164613_634717302959421250.png"    / alt="BUG that jquery's fadeIn and fadeOut methods fail under IE" ></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 is an absolute positioning class

<p>As long as the absolute positioning is replaced with floating, the effect of fading in and out can be achieved .

      

           
 
  
           

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

       
       

　　　　

           
 
  
           

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

       
       

<p>

<p> The specific position needs to be adjusted

<p>BUG2: Parent absolute positioning nested pictures that are larger than the parent size

<p> There is another situation, which is a BUG unique to IE8. The format is as follows

 <p class=" posab" style=" top:80px; left:260px;width:550px;height:55px">
  <img  class="png_bg lazy"  src="/static/imghwm/default1.png"  data-src="image.jpg"    / alt="BUG that jquery's fadeIn and fadeOut methods fail under IE" >
</p>

<p> If the size of the picture exceeds the size of p, it will fade under IE8 The fade-out effect will be invalid

<p>BUG3:

<p>There is a bug on the Internet that I have not encountered in detail. I will post it now:

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

<p>Let’s look at an example first

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

    


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

<p>

<p>The above code can basically achieve the expected results in all mainstream browsers

<p>But the reality is cruel, and your html structure will certainly not be that simple.

<p>Let’s add a little bit more

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

    

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

    


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

<p>At this time, the issue of shouting daddy will appear in IE 6 78. AnimationIf it doesn’t appear, will it happen? Directly show it and it will. do not have!

<p>This is a notorious big IE bug: If the sub-elements of the fadeIn element have the position attribute, the relative value is the most serious. Elements with the position attribute will not have the effect of fadeIn!

Possible curve solutions:

<p>1, without position: relative; This can sometimes be done

<p>2, if 1 is really not possible, for example, the author encountered If so, use each(). You can do this effect one by one. Of course it can be done, but the efficiency is too poor and it may hang up the user's computer. For example, in the situation I encountered, there are dozens or hundreds of sub-elements. This method is tens of thousands of times. Don't let anything happen. .

Targeted solution

<p>We want to achieve this effect without using position:relative without using each(), is that okay?

<p>Can!

<p>Since this is a bug, there must be a hack method

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

<p>Dynamicly change the position attribute to relative before fadeIn(); this bug under IE7 will be solved

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

<p>Add filter: inherit; to the elements whose child elements have the position attribute. Also add filter: inherit; to the first-level child elements of the current element.
As soon as these two are combined, the problems of IE678 will be solved

<p>

The above is the detailed content of BUG that jquery's fadeIn and fadeOut methods fail under IE. For more information, please follow other related articles on the PHP Chinese website!