jQuery .height() 与 chrome 的问题

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

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

Answer 2

我对引导下拉菜单有同样的问题，元素必须高度标准化。
对于某些菜单（不是全部），jquery 没有返回正确的高度，导致标准化不良。
这是因为下拉菜单在标准化过程中被隐藏了。当元素隐藏时，CHROME 和 FIREFOX 似乎无法正确计算高度。在这种情况下，IE 似乎工作得更好。

为了解决这个问题，我向所有菜单添加（然后删除）引导类“open”，以便使它们在规范化期间可见：

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

Answer 3

尝试两种方法来固定 Chrome 和 IE 的

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

高度

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

Answer 4

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

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

Answer 5

看来是两个浏览器默认字体不同造成的。如果您将以下 CSS 添加到示例中，则 Firefox 和 Chrome/Iron 的结果将相同：

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

您可以使用 CSS 重置 并自己定义样式。这将使您能够更好地控制如何使其在大多数浏览器中看起来相同。

Answer 6

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

$(document).ready( ...

为 a: ，

$(window).load( ...

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