chrome 的 jQuery .height() 问题

Question

我一直在使用 jQuery 高度函数。但是在获取我的 div 元素的正确高度时出现了问题。此 div 元素的高度设置为 auto，这意味着 div 的高度仅取决于其中的元素。当我尝试在我的页面中使用 .height() 时，我得到了以下结果:

Chrome: 1276 px
Firefox: 1424 px

但是当您看到它们时，它们具有相同的高度。唯一的问题是 height() 函数返回不同的结果。

代码如下:

<div class="single-mid" style="position:relative;width:700px;margin:-1px 0 0 1px;padding-right:56px;">
    <div>Sample Inside Element</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
     var less_height = $('.single-mid').height() -10;
     $('.single-mid').height(less_height);
});
</script>

但我试图将div 的高度设置为1424px。两个浏览器返回相同的结果。

有什么想法吗？提前致谢。

Answer 1

遇到了同样的问题。但是，如果我在进行高度检查之前进行了短暂的 setTimeout 延迟，chrome 就会开始报告与 firefox 相同的高度。在完全确定内容将如何改变容器的实际大小之前，chrome 似乎触发了文档就绪状态......!？无论如何，我的解决办法是改变我的:

$(document).ready( ...

给一个:

$(window).load( ...

直到“所有子元素都已完全加载”(来自 http://api.jquery.com/load-event/ )才会触发。