Chrome 与 IE 的 jQuery 问题答案

【问题标题】：jQuery issue with Chrome vs. IEChrome 与 IE 的 jQuery 问题
【发布时间】：2011-08-17 04:11:54
【问题描述】：

function runComplete() {
    var $elem=$(document.getElementById('quiz_section'));
    var center="<br /><h1>Your Score:</h1><h2>"+document.getElementById('quiz_score').innerHTML+"</h2><br /><br /><br /><a href='javascript:location.reload(true)'><h5>Try Again?</h5></a>";
    $elem.html('<form id="comp" style="width:33.333333%;height:1px;background-color:lightblue;border=1px solid #000000;pading:10px">'+center+'</form>');
    var theight=$elem.height()+20;
    $elem.css('height','1px');
    $elem.animate({height:theight});
}

在 IE 中，上面的代码运行良好！在 Chrome 中……嗯……没那么多。

它应该为表单设置动画并使其“倒下”，而不是调整它的大小。我在我的代码的其他地方使用了一种非常相似的技术（相同的动画），它在 Chrome 中运行得很好，这是唯一没有动画的东西。有什么想法吗？

这是测验的演示：

http://dalexl.tripod.com/HTMLQUIZ.htm

【问题讨论】：

你知道你可以打电话给$("#quiz_section")（虽然这无助于解决你的具体问题
你的内联 CSS 中有一个小错误，'border=' 而不是 'border:'
哦，谢谢 :) 这将有助于清理我的代码！
@KARASZI WOW，这是我正在处理的一个问题。 IE 显示边框，但 Chrome 不显示，谢谢 :)
在那里，我添加了项目的链接。

标签： jquery html internet-explorer google-chrome

【解决方案1】：

您应该改为拨打$elem.hide().slideDown()。

【讨论】：

能解释一下改的原因吗？
我不确定您当前的代码到底有什么问题；它相当混乱。但是，这应该有效。请展示一个演示。
你能不能至少解释一下为什么我应该使用这个而不是我所说的方法：o
更简单，而且还会动画边框和内边距。
在 IE 中效果很好，但在 Google Chrome 中效果不佳...它确实解决了我必须添加填充值的问题:)

【解决方案2】：

正如我在评论中所说的那样，这就是我在这里发布的问题:)

border= 包含错误的内联样式，而不是 border:

顺便说一句。我创建了一个jsfiddle 来玩它。

【讨论】：