Javascript Firefox和Chrome为offsetTop提供了不同的值_Javascript_Html_Css

Javascript Firefox和Chrome为offsetTop提供了不同的值

javascript html css

Javascript Firefox和Chrome为offsetTop提供了不同的值,javascript,html,css,Javascript,Html,Css,我试图相对于输入字段定位span元素（我们称之为“工具提示span”）。为此，我将工具提示span和输入字段包装在另一个span元素（我们称之为“包装span”）中，该span元素具有位置：relative。然后我在工具提示span上设置position:absolute。这使得工具提示范围相对于包装范围定位，但不是页面流的一部分，不会占用任何空间。这正是我想要的然后，使用javascript设置工具提示相对于输入元素的位置。由于输入元素在不同页面上的形状不同（脚本应该是全局适用的），因此我使

我试图相对于输入字段定位span元素（我们称之为“工具提示span”）。为此，我将工具提示span和输入字段包装在另一个span元素（我们称之为“包装span”）中，该span元素具有

位置：relative

。然后我在工具提示span上设置

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>


span{font size:8px；position:relative；top:0；left:0；border:1px纯红}
document.write（“
偏移父项：”+document.getElementById（“foo”）.offsetParent.id）；
document.write（“
偏移顶部：”+document.getElementById（“foo”）.offsetTop）；

并将其加载到Firefox和Chrome中。这两种浏览器都将包装范围报告为其

offsetParent

，但对于Firefox来说

offsetTop

是-8，对于Chrome来说是2。在视觉上，页面在两种浏览器中呈现相同的内容

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

这让我很头疼，因为我不能只是在别人使用Chrome时使用不同的偏移量，因为如果我更改字体大小，

offsetTop

将不会更改，我的脚本将中断

这是虫子吗？我可以用不同的方法解决这个问题吗？

将代码放入

窗口。onload

函数。我记得在firefox的页面加载过程中，当试图直接从

使用dom时，会遇到问题，webkit倾向于在这种情况下提供一个理智的dom

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

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

我遇到了同样的问题，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
     }
   });
}

希望这能有所帮助。

我遇到了与您相同的问题，我意识到（在我的情况下）是什么弄乱了偏移量（）。chrome中的最大值是在元素上方有一个或多个没有“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通过累加“over”元素的高度来获取te offset.top（）值，并且其中一个元素是没有指定高度的图像，那么“0”将被添加到该总和中，因此顶部值将缺少那些“忽略”的高度

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

我遇到了同样的问题，并尝试添加到我的函数中

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

而且它在Chrome和Firefox中都起作用

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

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

您可以尝试使用

$(window).load

而不是

$(document).ready

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

尝试等待文档准备就绪。我在“真实”代码中这样做了：这似乎无关紧要。我在Firebug和Chrome developer窗口中检查了offsetTop，它们的值都是相同的。我移动了类似这样的标签标签（验证错误消息：），方法是将它们设置为内联块（以及position:absolute；），然后使用边距相对于它在HTML中的位置定位，而不是顶部/右侧/底部/左侧属性。也许可以锻炼，如果可以的话，你可以避免额外的javascript。神圣的生锈的金属！我想说的是，这不是JQuery能够解决的问题之一。但事实证明，我不知道有一个position（）函数，它确实起到了作用。问题仍然存在，为什么Chrome/Safari报告的偏移量不同。但是你拿到支票了。