outerHeight(true)给出错误的值

Question

我想要一个容器元素的高度,包括边距和填充.

当我将鼠标悬停在Chrome开发工具中的元素上时,我获得了我正在寻找的值,但是当我使用jQuery时$('element').outerHeight(true); 我得到的价值要小得多.

该元素包含一个jQuery轮播(在带有position:relative项目的容器中position: absolute),可能与它有关吗？

提前致谢

Answer 1

我已多次遇到过这个问题,没有使用任何插件或unruly setTimeout函数的最佳解决方案是使用hook进入浏览器的onLoad事件.使用jQuery,它是这样完成的:

$(window).load(function(){ ...outerHeight logic goes here... });

这可能与您的标准完全分开,$(function(){ ...code... });因此所有其他正常工作的代码不必等到页面上的每个元素都加载完毕.

为什么会出现这种情况:
Chrome具有与Firefox不同的渲染算法,这会导致它在页面上的所有元素被完全绘制/显示之前触发onLoad事件,并且可供jQuery选择和检索高度.setTimeout()大多数时候都会工作,但是你不想依赖于那些天生就是盲目的东西 - 谁知道,将来这个Chrome中的"怪癖"可以修复!:)

Answer 2

我有同样的问题.我使用setTimeout稍等一下,在Chrome中获得正确的高度:

    setTimeout ( function () {
        var ht = $('.my-class').outerHeight( true );
    }, 1);

我希望有所帮助!

Answer 3

我遇到了同样的问题.

Firefox外部高度通过console.log:430 Chrome外观高度通过console.log:477

真正的外部高度(萤火虫布局):820

打开Firebug或删除状态栏后,它在console.log中设置了正确的值(820)(因此代码可以正常工作).

问题是由于图像.即使您在准备好文档时运行它,也不是所有图像都可能已加载,因此计算错误.

我正在使用desandro的插件,它解决了我的问题. https://github.com/desandro/imagesloaded

Answer 4

我想你可能需要

.outerHeight({margin: true});

按照这里：

可以通过传递将边距设置为 true 的选项映射来包含边距。