如何使这个jQuery代码段在Internet Explorer中工作？

Question

如何使这个jQuery代码段在Internet Explorer中工作？

3

如果说有什么时候让人讨厌IE的话，那就是现在了。这段代码从一个带内容的方框开始。当点击按钮时，方框应该下拉并淡入。

<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中工作？

- Nathan Osman

4

发生了什么或未发生什么？你测试过哪些IE版本？你尝试添加所需的<head></head>标签了吗？ - Pekka

我只是认为它们不重要，所以忽略了它们。忘记了 DOCTYPE。 - Nathan Osman

2个回答

1

我猜你的意思是在IE中，该项的高度不会改变。元素的高度似乎无法正确设置为0。当我更改时，它在我的IE8中有效。

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

到

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

我不知道为什么会这样。height()文档中没有提到任何IE特定的问题。

- Pekka

谢谢。将高度设置为1确实解决了问题。我应该在jQuery文档中加上注释。 - Nathan Osman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yisroel · Accepted Answer

因为你缺少了 <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>