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

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

$(document).ready( ...

到:

$(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 重置并自己定义样式。这将使您能够更好地控制如何使其在大多数浏览器中看起来相同。