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

发布于 2024-08-29 17:54:14 字数 988 浏览 3 评论 0原文

如果说有一个时候讨厌 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 中工作？

原文

If there was ever a time to hate IE, this is it. This code begins with a box with content. When the button is clicked, the box is supposed to drop down and fade-in.

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

This very simple example works on Chrome, Safari, and Opera. But Internet Explorer? No.

How can I (if it's even possible) fix this so that it works in IE?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

究竟谁懂我的在乎 2024-09-05 17:54:14

由于您缺少标记和 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>

Because you are missing the <head> tag and doctype declaration, your page is being rendered in Quirks Mode. Change this

<html>

to this

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

回复收藏 0 原文

情话已封尘 2024-09-05 17:54:14

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

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

为 IE8

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

时它可以在我的 IE8 中工作我不知道这是为什么。关于 height() 的文档没有提及任何 IE 特定的怪癖。

I assume what you mean is that in IE, the item's height won't change.
The element's height doesn't seem to get set to 0 properly. It works in my IE8 when I change