outsideHeight(true)给出错误的值 [英] outerHeight(true) gives wrong value

问题描述

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

I want the height of a container element, including margins and paddings.

当我将鼠标悬停在Chrome开发工具中的元素上时，会得到所需的值，但是当我使用jQuery $('element').outerHeight(true)时；我得到的价值要小得多.

When I hover over the element in Chrome development tool, I get the value that I'm looking for but when I use jQuery $('element').outerHeight(true); I get a much smaller value.

该元素包含一个jQuery轮播(在包含position:relative和项position: absolute的容器中)，这可能与它有关系吗?

The element contains a jQuery carousel (in a container with position:relative and items position: absolute), could that have something to do with it?

预先感谢

推荐答案

我已经多次遇到此问题，最好的解决方案是在浏览器的onLoad事件中使用钩子，而无需使用任何插件或不合常规的setTimeout函数.使用jQuery，它是这样完成的:

I have experience this issue several times, and the best solution, without the use of any plugins or unruly setTimeout functions, is to use hook into the browser's onLoad event. With jQuery, it's done like so:

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

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

This could be totally separate from your standard $(function(){ ...code... }); so all of your other properly working code doesn't have to wait until every single element on the page has loaded.

为什么首先发生这种情况:
Chrome浏览器的渲染算法与Firefox不同，它使Firefox在完全绘制/显示页面上的所有元素并可供jQuery选择和检索高度之前触发onLoad事件. setTimeout()在大多数情况下都会起作用，但是您不想对本质上如此盲目的东西产生依赖-谁知道，将来Chrome中的这种怪癖"可能会得到解决！ :)

Why this happens in the first place:
Chrome has a different rendering algorithm than Firefox, which causes it to trigger the onLoad event before all the elements on the page are completely drawn/displayed and available for jQuery to select and retrieve heights. setTimeout() will work most of the time, but you don't want to develop a dependency on something so blind by nature – who knows, in the future this "quirk" in Chrome could be fixed! :)

这篇关于outsideHeight(true)给出错误的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！