本文通过一个具体的 HTML 示例，展示了不同浏览器中 offsetParent 属性的行为差异。特别关注了当内部元素采用绝对定位而外部元素采用相对定位时，offsetParent 的指向问题。此问题在 Firefox 4 中表现尤为明显。
运行代码
我们对td进行相对定位，它里面的div进行绝对定位，按理div的offsetParent为td，但FF4中则跑到body元素中去了，这搞到我很痛苦，又得套嵌一层了……
/* opera10.7 td chrome 10 body safari5 body FF3.6 Ff4 body IE6-IE9 td */
<!doctype html>
<html>
<head>
<title>offsetParent bug by 司徒正美</title>
<script src="/javascripts/jquery1.52.js"></script>
<script src="/neo/dom.js"></script>
<style>
.test_table{
width: 80%;
border: 1px solid #B33F3F;
border-collapse: collapse;
}
.test_td{
border: 1px solid #B33F3F;
padding: 5px;
position: relative;
}
.test_div{
position: absolute;
border: 1px solid #00cc00;
height: 20px;
width: auto;
}
</style>
<script>
window.onload = function(){
alert(document.getElementById("test_div").offsetParent)
}
</script>
</head>
<body>
<table class="test_table">
<tbody>
<tr>
<td class="test_td">
<div class="test_div" id="test_div">测试offsetParent </div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
扫一扫
2260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
