wax*_*ing 9 html javascript css
我试图相对于输入字段定位一个span元素(让我们称之为"工具提示跨度").为此,我将工具提示范围和输入字段包装在另一个span元素中(让我们称之为"包装器跨度")position: relative.然后我设置position: absolute工具提示跨度.这使得工具提示跨度位置本身相对于包装器跨度,但不是页面流的一部分 - 不占用任何空间.这正是我想要的.
然后,使用javascript,我设置工具提示相对于输入元素位置的位置.由于输入元件可以不同在不同的页面被成形(脚本应globablly适用),我使用其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则不会改变,我的脚本会破坏.
这是一个错误吗？我能解决这个问题吗？
小智 15
你可以尝试使用
$(window).load
代替
$(document).ready
因为Explorer和Chrome仅在图像完全加载后才设置正确的偏移量.
使用 jQuery。浏览器之间的 DOM 差异是它擅长的事情之一。