jQuery .height() 与 chrome 的问题答案

【问题标题】：jQuery .height() problem with chromejQuery .height() 与 chrome 的问题
【发布时间】：2011-03-31 21:53:51
【问题描述】：

我一直在使用 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。两个浏览器返回相同的结果。

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

【问题讨论】：

请提供链接或演示。
我还没有上传到现场。我目前在本地主机上工作。

标签： jquery html height

【解决方案1】：

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

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

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

【讨论】：

我第二个 Gert。如果您不使用带有百分比的字体大小，它可以正常工作。

【解决方案2】：

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

$(document).ready( ...

到：

$(window).load( ...

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

【讨论】：

谢谢科里！！！这是最简单的解决方法，它避免了一堆俗气、冗长的 html 来明确定义 div 高度。你让我开心。

【解决方案3】：

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

$(window).load( 确实为我工作，但耽误了我想做的事情。

【讨论】：

【解决方案4】：

尝试两种方法在chrome和IE中固定高度

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

和

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

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

【讨论】：