如何使這個jQuery代碼片段在Internet Explorer中工作？

如果有一段時間討厭IE，就是這樣。此代碼以包含內容的框開頭。點擊該按鈕時，該框應該放下並淡入。如何使這個jQuery代碼片段在Internet Explorer中工作？

<html> 
<script type="text/javascript" src="jquery.js"></script> 
<script type='text/javascript'> 

function Test() 
{ 
    var item_height = $('#test').height(); 
    $('#test').height(0); 
    $('#test').css('opacity','0'); 

    $('#test').animate({ height: item_height, opacity: '1' },400); 
} 

</script> 
<body> 
<!-- The div below holds the sample content --> 
<div id="test" style='border: 1px solid black;'> 
    Content<br> 
    Content<br> 
    Content<br> 
    Content<br> 
    Content 
</div> 
<!-- The button to test the animation --> 
<br><br> 
<div style='position: absolute; top: 150px; left: 10px;'> 
    <button onclick='Test();'>Test</button> 
</div> 
</body> 
</html>

這個非常簡單的例子適用於Chrome，Safari和Opera。但Internet Explorer？否。

我怎麼能（如果它甚至可能）解決這個問題，以便它在IE中工作？

來源

2010-04-21 Nathan Osman

什麼情況或不會發生？您在哪些IE中測試過它？您是否嘗試添加所需的''標籤？ – 2010-04-21 22:00:09

猜測我只是忽略了這些，因爲我認爲它們並不重要。忘記DOCTYPE。 – 2010-04-21 22:30:39

由於您缺少<head>標記和文檔類型聲明，因此您的頁面將以怪癖模式呈現。改變這種

<html>

這個

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head>

來源

2010-04-21 22:18:43 Yisroel

工作太... heh-heh ...現在我最好刪除我對jQuery文檔所做的評論。 – 2010-04-21 22:27:41

嗯。它不會讓我。如果來自jQuery文檔的任何人讀到這一點 - 我很抱歉：我無法弄清楚如何刪除評論。 – 2010-04-21 22:28:50

我假定你的意思是在IE中，項目的高度不會改變。元素的高度似乎沒有正確設置爲0。當我改變

$('#test').height(0);

到

$('#test').height(1);

我不知道這是爲什麼它工作在我的IE8。 documentation on height()沒有提到任何IE特定的怪癖。

來源

2010-04-21 22:07:24

謝謝。將高度設置爲1確實可以解決問題。我應該在jQuery文檔中對此進行評論。 – 2010-04-21 22:20:16

其有趣的是.height（0）不適用於怪癖模式 – Yisroel 2010-04-21 22:44:41

雅，這很奇怪。 – 2010-04-21 23:43:49

如何使這個jQuery代碼片段在Internet Explorer中工作？

回答

相關問題