2009-11-17 7 views
0

페이지 위쪽에서 메시지를 슬라이드 한 다음 몇 초 후에 다시 슬라이드하는 매우 간단한 스크립트가 있습니다. FireFox, Chrome 등에서 잘 작동하지만 IE (6에서 8까지)에서 slideUp이 완료되면 div가 사라지기 전에 전체 크기로 표시되고 불쾌한 플래시가 발생합니다. 이걸 없애는 방법에 대한 아이디어가 있습니까?jQuery/CSS IE 슬라이드 업 플래시를 제거 하시겠습니까?

여기 전체에서 페이지의 : IE가 HTML 문서의 DOCTYPE이가 쿼크 모드에 표시 다시 떨어질 따라서 무엇인지 모르기 때문에

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

답변

2

짧은 대답, 그것은입니다. 이를 제거하려면 다음 코드를 페이지의 머리에 추가하여 doctype을 요청하십시오.

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

가이 문제에 대해 철저하게 이해하고 페이지를 렌더링 할 두 가지 '모드'대부분의 브라우저에 대한 자세한 내용을, quirksmode.orgquirks mode and strict mode을 참조하십시오.

+0

감사합니다. – Parand

+0

고마워요. 나는이 어리석은 문제에서 길을 잃었다. –

관련 문제