Question

我一直在使用jQuery Height功能。但是获取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( ...

到a：

$(window).load( ...

在“所有子元素已完全加载”之前不会触发（来自http://api.jquery.com/load-event/）。

Answer 2

这似乎是由两个浏览器中的不同默认字体引起的。如果您在示例中添加以下CSS，则Firefox和Chrome / Iron的结果将相同：

<style type="text/css">
  div {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
  }
</style>

您可以使用CSS reset并自行定义样式。这样可以让您更好地控制在大多数浏览器中如何使其看起来一样。

Answer 3

这件事发生在我身上，以及我div中计算高度的某些图片没有设置height属性的原因。

$(window).load(确实对我有用，但对我想做的事情造成了太大的延迟。

Answer 4

尝试两种方法来修复chrome和IE中的高度

jQuery(document).ready(function() {
   // your code here
});

和

jQuery(window).load(function(){
  // your code here
});

Answer 5

我在bootstrap下拉菜单中遇到了同样的问题，即元素必须高度标准化。对于某些菜单（不是全部），jquery没有返回正确的高度，导致错误的规范化。这是因为在规范化过程中隐藏了下拉菜单。看起来CHROME和FIREFOX在隐藏元素时不能正确计算高度。在这种情况下，IE似乎效果更好。

要解决这个问题，我已经添加（然后删除）bootstrap类＆＃34;打开＆＃34;到所有菜单，以便在标准化过程中使它们可见：

    $(window).on( "load resize orientationchange", function() {
        $(".dropdown").addClass("open");
        normalize_all();
        $(".dropdown").removeClass("open");
    });

Answer 6

在使用Google Fonts的字体时，我遇到了同样的问题，它隐式地将行高设置为1.5em，而jQuery可能没有看到。当我明确将line-height：1.5em写入CSS重置（或网站字体设置）后，就可以了。

jQuery .height（）问题与chrome

6 个答案: