如何使这个jQuery片段在Internet Explorer中工作? [英] How to make this jQuery snippet work in Internet Explorer?

查看:128
本文介绍了如何使这个jQuery片段在Internet Explorer中工作?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如果有时间讨厌IE,就是这样。此代码以包含内容的框开头。当按钮被点击时,该框应该下拉并淡入。

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

函数Test()
{
var item_height = $('#test')。
$('#test')。height(0);
$('#test')。css('opacity','0');

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

< / script>
< body>
<! - 下面的div保存了样本内容 - >
< div id =teststyle ='border:1px solid black;'>
内容< br>
内容< br>
内容< br>
内容< br>
内容
< / div>
<! - 测试动画的按钮 - >
< br>< br>
< div style ='position:absolute;顶部:150px;左:10px;'>
< button onclick ='Test();'>测试< / button>
< / div>
< / body>
< / html>

这个非常简单的例子适用于Chrome,Safari和Opera。但Internet Explorer?



我如何(如果还有可能)修复这个问题,以便在IE中运行?

解决方案

由于您缺少< head> 标签和doctype声明,您的页面正在呈现怪癖模式。更改此

 < html> 

到这个

 code><!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/xhtmlxml:lang =enlang =en>
< head>


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?

解决方案

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>

这篇关于如何使这个jQuery片段在Internet Explorer中工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆