jQuery .height（）与Chrome的问题 [英] jQuery .height() problem with chrome

问题描述

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

I've been using jQuery Height function. But there was a problem in getting the correct height of my div element. This div element's height is set to auto, which means the div's height depends only on the elements inside of it. When I tried using the .height() in my page, I got the following result:

Chrome: 1276 px
Firefox: 1424 px

但是当你看到他们都有同样的身高。唯一的是 height（）函数返回不同的结果。

But when you see them both they have equal height. The only thing is that the height() function returns different result.

以下是代码：

<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。两种浏览器都返回相同的结果。

But I tried to set the div's height into 1424px. Both browser return the same result.

有什么想法？提前致谢。

Any ideas? Thanks in advance.

推荐答案

有同样的问题。但是如果我在进行hight检查之前做了一个简短的setTimeout延迟，Chrome开始报告与firefox相同的高度。在完全确定内容将如何改变容器的实际大小之前，似乎chrome会触发文档就绪状态......！在任何情况下，我的修复是改变我的：

Had the same issue. But if I did a brief setTimeout delay before doing the hight check, chrome started reporting the same height as firefox. It seems chrome triggers the document ready state before fully determining how the content will alter the actual size of the container...!? In any case, my fix was to change my:

$(document).ready( ...

到a：

$(window).load( ...

直到元素已完全加载（来自 http://api.jquery.com/load-event/）。

which doesn't trigger until "all sub-elements have been completely loaded" (from http://api.jquery.com/load-event/).

这篇关于jQuery .height（）与Chrome的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！