Question

我正在尝试相对于输入字段定位span元素（让我们将其称为“工具提示范围”）。为此，我将工具提示范围和输入字段包装在另一个span元素（让我们称之为“包装器范围”）中，其中包含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将不会改变，我的脚本将会断裂。

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

Answer 1

您可以尝试使用

$(window).load

而不是

$(document).ready

因为Explorer和Chrome仅在图像完全加载后才设置正确的偏移。

Answer 2

我遇到了和你一样的问题，我意识到（在我的情况下）那个搞乱了偏移（）的东西。镀铬中的顶部值，有一个或多个没有“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，和CHROME中都是150。

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

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

PS：对不起我的英语，我用这种语言写了这么长的长文本已经很久了！

Answer 3

将代码放入window.onload函数中。我记得在firefox的页面加载期间尝试直接从<script>使用dom时遇到问题，而webkit往往更愿意在这些点上给出一个理智的DOM。

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

Answer 4

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

Answer 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
     }
   });
}

希望这有帮助。

Answer 6

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

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

它可以在Chrome和Firefox中使用

Answer 7

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

Answer 8

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

Firefox和Chrome为offsetTop提供不同的值

8 个答案: