如何使这个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中工作？

回答

相关问题