jQuery $.position() 在 chrome 中的 $(document).ready 期间表现不同（webkit？）答案

【问题标题】：jQuery $.position() acting different during the $(document).ready in chrome (webkit?)jQuery $.position() 在 chrome 中的 $(document).ready 期间表现不同（webkit？）
【发布时间】：2012-03-23 17:09:10
【问题描述】：

当我尝试获取元素在 $(document).ready(function() { }); 中的位置时它在 chrome 中为 position.top 提供了不同的（不正确的）值，但在 Firefox 中是正确的。根据获得位置的元素，它会偏移 15-45px。

我有一个视口中的项目列表溢出：隐藏，我想获取每个项目的位置。

<div class='viewport'>
  <div class='item'>Item Info</div>
  <div class='item'>Item Info</div>
  <div class='item'>Item Info</div>
  <div class='item'>Item Info</div>
</div>

.viewport { position:relative; overflow: hidden; }
.item { margin-left: 10px; }

当我执行$(".viewport .item").each(function() { var pos = this.position(); }); 时，它会给出值，但它们是错误的。

更奇怪的是，如果我从控制台执行此操作（页面加载完成后），它将返回正确的值。似乎不正确的值只出现在 $(document).ready 期间。

有没有办法解决这个问题，所以我仍然可以在 doc.ready 期间进行定位？

【问题讨论】：

改用this.offset().top;
除了$(this).position()而不是this.position()的一个语法错误之外，我在firefox和chrome中都可以正常工作
确保两个浏览器的缩放都使用ctrl + 0 100% 视图
@Trevor：你外面有没有margin-top的父div？
@Trevor：尝试使用$(window).load(.....) 而不是document.ready

标签： jquery google-chrome webkit position document-ready

【解决方案1】：

position() (docs) 与 offset 模块中的其他函数（更一般地说，在 css 模块中）一样，取决于元素在渲染后在 DOM 中的实际位置。

另一方面，$(document).ready() 在 DOM 构建后立即触发。
在现代浏览器上，它对应于DOMContentLoaded：

文档已完全加载和解析，无需等待样式表、图像和子框架完成加载

在ready 中，您可以安全地操作 DOM（附加事件等），但如果您“测量”它可能会遇到问题。例如，它不等待样式表下载或图像下载和呈现。

你遇到了一个非常烦人的问题，因为它非常依赖于平台（浏览器 + jQuery 版本）：在我们的例子中，它在三个浏览器中的两个上运行，甚至在第三个浏览器上运行 99% time，这表明它可能是一个竞争条件（JavaScript 是单线程的，但浏览器不是）。

如果你需要测量元素，你最好使用$(window).load()

【讨论】：