筆記：IE下 jquery的fadeIn與fadeOut方法失效的BUG

<p>BUG1:絕對定位嵌套絕對定位

<p>這個問題遇到過好多次，因為沒有做筆記，所以每次遇到這個問題都要研究半天。好記性不如爛筆頭，這話一點沒錯。

<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  是絕對定位的class

<p>只要把絕對定位換成浮動，就可以實現淡隱淡出的效果了。

      

           
 
  
           

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

       
       

　　　　

           
 
  
           

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

       
       

<p>

<p> 具體的位置需要做一些調整

<p>BUG2：父級絕對定位巢狀大於父級尺寸的圖片

<p>還有一種情況，是IE8獨有的BUG，格式如下

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

<p> 如果圖片的大小超過了p的大小，在IE8下面淡隱淡出效果將會失效

<p>BUG3:

<p>網路上還差了一種bug，具體沒有遇過，現也貼上：

IE6 IE7 IE8 在position : relative 時fadeIn() fadeOut() bug 解決方案

<p>先看一個例子

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

    


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

<p> 

<p>以上程式碼基本上在所有主流瀏覽器都可以達到預期效果

<p>但是現實是殘酷的， 大家的html結構當然不會這麼簡單。

<p>我們再加一點東東

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

    

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

    


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

<p>這時候在IE 6 78 就會吭爹的事情出現， 動畫不出現有木有!  直接show出來有木有！

<p>這是臭名昭著的 IE 大bug： 如果fadeIn的元素的子元素有position屬性時 以relative值為最嚴重 有position屬性的元素不會出現fadeIn的效果！

可能的曲線解決方法：

<p>1， 不用position: relative;  這個嘛有時候可以做到

<p>2，如果1實在做不到， 例如筆者遇到的情況，那就用each()。 你可以一個一個做這個效果， 這個當然是可以做到的， 不過效率太差， 搞不好會掛掉用戶的電腦，比如筆者遇到的情況，有幾十個上百個子元素這個方法是萬萬使不得滴。 。

針對性解決方法

<p>我們要在使用position:relative 而且不使用each()的情況下達到這個效果，可以嗎？

<p>可以！

<p>既然這是一個bug 那一定就有hack的方法

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

<p>在fadeIn()之前動態的將其position屬性改為relative; 會解決IE7下的這個bug

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

<p>在你子元素有position屬性的元素加filter: inherit; 目前元素的第一層子元素也要加。
這兩個一結合 IE678 的問題就都解決了

<p> 

以上是筆記：IE下 jquery的fadeIn與fadeOut方法失效的BUG的詳細內容。更多資訊請關注PHP中文網其他相關文章！