jquery - externalHeight(true) 给出了错误的值

Question

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

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

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

提前致谢

Answer 1

我已经多次遇到这个问题，最好的解决方案是使用钩子(Hook)到浏览器的onLoad事件中，而不使用任何插件或不规则的setTimeout函数。使用 jQuery，它是这样完成的:

$(window).load(function(){ ...outerHeight 逻辑在这里... });

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

为什么会发生这种情况:
Chrome 具有与 Firefox 不同的渲染算法，这导致它在页面上的所有元素完全绘制/显示并可供 jQuery 选择和检索高度之前触发 onLoad 事件。 setTimeout() 在大多数情况下都可以工作，但您不想对本质上如此盲目的东西产生依赖 - 谁知道，将来 Chrome 中的这个“怪癖”可能会被修复! :)