Question

如果有时间讨厌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中运行？

Answer 1

由于您缺少<head>代码和doctype声明，因此您的页面将以Quirks模式呈现。改变这个

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

Answer 2

我假设你的意思是在IE中，项目的高度不会改变。元素的高度似乎没有正确设置为0。当我改变

时，它在我的IE8中工作

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

到

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

我不知道为什么会这样。 documentation on height()未提及任何IE特定的怪癖。

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

2 个答案: