我正在尝试相对于输入字段定位一个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来说，offsetTop是2。在视觉上，页面在两个浏览器中都呈现相同的外观。这让我很头疼，因为我不能仅仅使用别人在使用Chrome时总是应用的偏移量，因为如果我更改字体大小，则ojit_code不会更改，并且脚本会损坏。
这是一个错误吗？我可以以其他方式解决吗？
最佳答案
使用jQuery。浏览器之间的DOM差异是它擅长的事情之一。
关于javascript - Firefox和Chrome为offsetTop赋予不同的值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1472842/