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

BUG1:絕對定位嵌套絕對定位

這個問題遇到過好屢次，由於沒有作筆記，因此每次遇到這個問題都要研究半天。好記性不如爛筆頭，這話一點沒錯。

<div id="show_list">
      <div class=""  val="0">
           <div class=" posab" style="top:50px; left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></div>  
           <div  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>
           </div>
       </div>

　　　　<div class=""  val="0">
           <div class=" posab" style="top:50px; left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></div>  
           <div  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>
           </div>
       </div>

<div>

posab  是絕對定位的class

只要把絕對定位換成浮動，就能夠實現淡隱淡出的效果了。

<div id="show_list">
      <div class="posab"  val="0">
           <div class="" style="margin-top:50px; float:left; margin-left:260px"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></div>  
           <div  class="alce"  style="margin-top:-200px; width:260px; margin-left:80px; float:left">
                <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>
           </div>
       </div>       

　　　　<div class="posab"  val="0">
           <div class="" style="margin-top:50px; margin-left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></div>  
           <div  class="alce"  style="margin-top:-200px; width:260px; margin-left:80px;float:left">
                <p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;float:left">測試測試測試</p>
                <p class=" f14 l22 alce" style="color:#e99417;">測試測試測試</p>
                <p class="lk444 f14  l22 alce" style="margin-top:5px;">測試測試測試</p>
           </div>
       </div>       

<div>

 具體的位置須要作一些調整

BUG2：父級絕對定位嵌套大於父級尺寸的圖片

還有一種狀況，是IE8獨有的BUG，格式以下

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

 若是圖片的大小超過了div的大小，在IE8下面淡隱淡出效果將會失效

BUG3:

網上還差了一種bug，具體沒有遇到過，現也貼上：

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

先看一個例子
<div class="fadein">
    <div>
        <div>I am going to fade in ;</div>
        <div>I am going to fade in ;</div>
    </div>
</div>
$('.fadein').fadeIn();

 

以上代碼基本上在全部主流瀏覽器均可以達到預期效果

可是現實是殘酷的， 你們的html結構固然不會這麼簡單。

咱們再加一點東東

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

<div class="fadein">
    <div class="relative">
        <div>I am going to fade in ;</div>
        <div>I am going to fade in ;</div>
    </div>
</div>
$('.fadein').fadeIn();

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

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

可能的曲線解決方法：

1， 不用position: relative;  這個嘛 有時候能夠作到

2，若是1實在作不到， 好比筆者遇到的狀況，那就用each()。 你能夠一個一個作這個效果， 這個固然是能夠作到的， 不過效率太差， 搞很差會掛掉用戶的電腦，好比筆者遇到的狀況，有幾十個上百個子元素 這個方法是萬萬使不得滴。。

針對性解決辦法

咱們要在使用position:relative 並且不使用each()的狀況下達到這個效果，能夠嗎？

能夠！

既然這是一個bug 那必定就有hack的方法

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

在fadeIn()以前動態的將其position屬性改成relative; 會解決IE7下的這個bug

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

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