Question

我有一个非常简单的脚本，可以从页面顶部向下滑动消息，然后在几秒钟后将其重新滑回。在FireFox，Chrome等中运行良好，但在IE（6到8）中，在完成幻灯片后，div会以全尺寸显示片刻然后消失，从而产生令人讨厌的闪光。关于如何摆脱这个的任何想法？

这是完整的页面：

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

Answer 1

简短的回答，这是因为IE不知道你的html文档的doctype是什么，因此它回退到以怪癖模式显示它。要删除它，只需通过将以下代码添加到页面的头部来声明您的文档类型。

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

要彻底了解此问题并详细了解大多数浏览器将呈现您网页的两种不同“模式”，请阅读quirks mode and strict mode上的quirksmode.org。

摆脱jQuery / CSS IE slideUp flash？

1 个答案: