Firefox 和 Chrome 给出不同的 offsetTop 值答案

【问题标题】：Firefox and Chrome give different values for offsetTopFirefox 和 Chrome 给出不同的 offsetTop 值
【发布时间】：2013-06-24 01:48:23
【问题描述】：

我正在尝试相对于输入字段定位一个跨度元素（让我们称之为“工具提示跨度”）。为此，我将工具提示跨度和输入字段包装在另一个具有position: relative 的跨度元素（我们称之为“包装器跨度”）中。然后我在工具提示跨度上设置position: absolute。这使得工具提示跨度位置本身相对于包装器跨度但不是页面流的一部分 - 不占用任何空间。这正是我想要的。

然后，我使用 javascript 设置工具提示相对于输入元素位置的位置。由于输入元素在不同页面上的形状可能不同（脚本应该是全球适用的），我使用它的offsetTop 和offsetLeft 属性来计算它相对于包装器跨度的位置。

但是，我注意到这里的浏览器之间存在不一致。在 Firefox、IE6、7、8 中，它按预期工作。但在 Chrome 和 Safari 中，报告的 offsetTop 似乎是不正确的。

为了证明这一点，我创建了下面的测试页面：

<html>
<head>
<style type="text/css">
span { font-size: 8px; position: relative; top: 0; left: 0; border: 1px solid red } 
</style>
</head>
<body>

<span id="wrapper">
<input id="foo" name="foo" type="text">
</span>

<script type="text/javascript">
document.write("<br>Offset parent: " + document.getElementById("foo").offsetParent.id);
document.write("<br>Offset top: " + document.getElementById("foo").offsetTop);
</script>

</body>
</html>

并在 Firefox 和 Chrome 中加载它。两种浏览器都将包装器跨度报告为 offsetParent，但对于 Firefox，offsetTop 是 -8，对于 Chrome，它是 2。视觉上，页面在两种浏览器中呈现相同。

这让我很头疼，因为我不能只修改别人使用 Chrome 时总是应用的不同偏移量，因为如果我改变字体大小，offsetTop 不会改变，我的脚本会中断。

这是一个错误吗？我可以用不同的方式解决这个问题吗？

【问题讨论】：

尝试等待文档准备好
我在“真实”代码中做到了这一点：似乎无关紧要。我在 Firebug 和 Chrome 开发者窗口中检查了 offsetTop，值是一样的。
我已经移动了这样的标签标签（验证错误消息：d.pr/i/yvGS），方法是使它们成为内联块（连同 postion:absolute;），然后使用边距将它们相对于它的位置定位HTML，而不是 top/right/bottom/left 属性。可以锻炼，如果可以的话，你可以避免额外的 javascript。

标签： javascript html css

【解决方案1】：

你可以试试

$(window).load

而不是

$(document).ready

因为 Explorer 和 Chrome 仅在图像完全加载后才会设置适当的偏移量。

【讨论】：

【解决方案2】：

我遇到了和你一样的问题，我意识到（在我的例子中）弄乱了 chrome 中 offset().top 值的东西是有一个或多个没有“height”属性的图像元素上方。

之前

<img src="/images/foo.jpg" />

offset.top() 在 Chrome 中为 100

offset.top() 在 Firefox 和 IE7 中为 150（信不信由你，它在 IE 中工作得很好！）

之后

<img src="/images/foo.jpg" height="50" width="50" />

offset.top() 在 Firefox、IE7、AND CHROME 中都是 150。

请注意，差异为 50px，实际上与图像高度相同。

由于我正在开发一个 JQuery 插件，我尝试收集所有未定义其宽度和高度属性的图像，并使用 .width() 和 .height() 手动设置它们的大小，但它不起作用，因为 Chrome 对这两个函数都返回了 0。所以，我猜 offset.top() 的问题实际上依赖于此。如果 JQuery 试图通过累积“上方”元素的高度来获取 te offset.top() 值，并且其中一个元素是没有指定高度的图像，则“0”将被添加到该总和，因此顶部值将丢失那些“被忽略”的高度。

PS：对不起我的英文，很久没有用这种语言写过这么长的文字了！

【讨论】：

【解决方案3】：

使用 jQuery。浏览器之间的 DOM 差异是它擅长的事情之一。

【讨论】：

神圣的生锈金属！我要说的是，这不是 JQuery 可以解决的问题之一。但事实证明，有一个我不知道的 position() 函数，它确实起到了作用。问题仍然存在，为什么 Chrome/Safari 会以不同的方式报告偏移量。但你得到了支票。

【解决方案4】：

将您的代码放入window.onload 函数中。我记得在 firefox 页面加载期间尝试直接从 <script> 使用 dom 时遇到问题，而 webkit 在这种情况下往往更愿意提供理智的 DOM。

这只是基于我之前遇到的问题，我不确定它是否适用于您的情况。

【讨论】：

【解决方案5】：

我遇到了同样的问题，jQuery 的 position() 函数与 offset() 函数的报告相同。最终事实证明，即使等待文件准备好也不适合我。我必须稍后在流程中检查 offset()（在我的情况下，在我的处理程序中，在 window.scroll 事件中触发）。

当我在下面尝试这个测试代码时，在页面加载时，我得到了 Firefox + Chrome 的不同数字。但是，一旦加载，我可以按“d”，两个浏览器都会得到相同的数字。

// this produced different results on Chrome + Firefox (Chrome was wrong!)
$(document).ready(function () {
   var x =  $('#some-div-on-your-page').position().top;
   alert("On load, offset is "+x);   // Chrome + Firefox report diff figures

  $(window).keydown(function(e, r) {
     k = e ? e.keyCode : event.keyCode;
     if(k == 68) {      // press 'd'
        var x =  $('#some-div-on-your-page').position().top;
        alert("Now the offset is "+x); // ...but this is consistent
     }
   });
}

希望这会有所帮助。

【讨论】：

【解决方案6】：

我遇到了同样的问题，并尝试添加到我的功能

$(document).ready(function(){});

它在 Chrome 和 Firefox 中都有效

【讨论】：

【解决方案7】：

如果您在 chrome 中得到“0”，请查看您是否针对像“a”这样的空元素。它需要包装一些东西才能返回正确的偏移量。

【讨论】：

【解决方案8】：

这可能与浏览器默认设置的 HTML 和 body 元素的不同边框/边距值有关。

【讨论】：