擺脫jQuery/CSS IE slideUp閃光？

我有一個非常簡單的腳本，可以從頁面頂部向下滑動消息，然後在幾秒鐘後將其滑回。在FireFox，Chrome等中運行良好，但在IE（6到8）中，在slideUp完成後，div在出現之前以全尺寸顯示，然後消失，創建一個令人討厭的閃光燈。任何想法如何擺脫這個？擺脫jQuery/CSS IE slideUp閃光？

下面是完整的頁面：

<html> 
    <head> 
     <title>Alert Drawer</title> 
     <script type="text/javascript" src="../jquery.js"></script> 
     <style> 
#drawer { 
    background-color: yellow; 
    overflow:visible; position:fixed; left:0; top:0; 
    text-align:center; 
    padding:15px; font-size:18px; border-bottom:2px solid #789; 
    width:100%; display:none; z-index:2; 
} 
     </style>   
    </head> 
    <body> 
<div id="drawer"></div> 
<p> 
    <br><br><br><br><br><br><br><br> 
    <a href="#doit">Show the alert drawer!</a> 
</p> 
    </body> 
<script type="text/javascript">//<![CDATA[ 
$(function() { 
    var drawer = $('#drawer'); 
    $('a').click(function() { 
     drawer.html("<center>Hey Man!<br>This is a message.</center>"); 
     drawer.slideDown(function() { 
       drawer.css("backgroundColor", "orange"); 
       setTimeout(function() { drawer.css("backgroundColor", "yellow"); }, 1000); 
      } 
     ); 
     setTimeout(function() { drawer.slideUp(); }, 3000); 
     return false; 
    }); 
}); 
//]]></script> 

</html>

來源

2009-11-17 Parand

簡短的回答，這是因爲IE不知道你的HTML文檔的文檔類型是什麼，因此它退到怪癖模式來顯示它。要將其刪除，只需在頁面的頭部添加以下代碼即可聲明您的文檔類型。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

徹底瞭解這個問題，並詳細瞭解了兩種不同的「模式」，大多數瀏覽器會使您的網頁，請閱讀quirksmode.org quirks mode and strict mode。

來源

2009-11-17 08:13:43 nil

謝謝你，沒有。 – Parand 2009-11-17 08:26:37

非常感謝。我迷失在這個荒謬的問題中。 – 2013-03-29 13:13:10

擺脫jQuery/CSS IE slideUp閃光？

回答

相關問題