offsetLeft/Top Bug in Firefox

offsetLeft/Top Bug in Firefox
作者：Neoxone 发表时间： 2011年01月17号，星期一阅读：4,108 次

之前在这篇文章offsetX/Y for Firefox中有顺带提到ie6,ie7对于offsetLeft的不标准行为。

<!doctype html>
<html>
<head>
<style>
*{padding:0;margin:0;}
body{padding:50px;}
#a{width:500px;height:500px;background:#ccc;padding:50px;}
#b{width:400px;height:400px;background:#ddd;padding:50px;}
#c{width:300px;height:300px;background:#eee;padding:50px;}
</style>
</head>
<body>
<div id='a' style='position:relative;'>
	a
	<div id='b'>
	b
		<div id='c'></div>
	</div>
</div>
</body>
<script>
	$id=function(o){return document.getElementById(o) || o }
	$id('c').innerHTML='c的offsetLeft=' + $id('c').offsetLeft
</script>
</html>

obj.offsetLeft是相对与“offsetParent”的距离，按标准应该是距其上级中定位元素的距离(如果不存在这个元素，则相对于整个页面文档)。
而对于ie6,ie7，obj.offsetLeft是相对其直接父级的距离——显然他们没有遵循标准。

而今天提到的兼容问题则要归咎于firefox的不合群。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>offsetLeft in Firefox</title>
</head>
<body>
<style type="text/css">
*{padding:0;margin:0;}
#wrap{position:relative; width:500px; height:100px; overflow:hidden; border:10px solid #999;}
#scrolllist{position:absolute; top:0px; left:0px; width:50px;height:100px;background:#ccc;}
</style>
<div id="wrap">
  <ul id="scrolllist">
  </ul>
</div>
<script>
function $(id){return document.getElementById(id);}
$('scrolllist').innerHTML=$('scrolllist').offsetLeft;
</script>
</body>
</html>

当子级相对于父级绝对定位，而父级又有这两个属性：overflow:hidden; border:10px solid #999;时，
在firefox看来，子级的offsetLeft就需要再减去border值。很怪异的解释。

《offsetX/Y for Firefox》
《关注标准CSS之外的世界》

标签： FireFox, offsetLeft

这篇文章发布于 2011年01月17号，星期一，11:06，归类于 DOM, Javascript, 浏览器与兼容。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

CSSASSCSSASS

offsetLeft/Top Bug in Firefox
作者：Neoxone 发表时间： 2011年01月17号，星期一阅读：4,108 次

相关文章:

留下回复

offsetLeft/Top Bug in Firefox作者：Neoxone 发表时间： 2011年01月17号，星期一 阅读：4,108 次

相关文章:

留下回复

offsetLeft/Top Bug in Firefox
作者：Neoxone 发表时间： 2011年01月17号，星期一阅读：4,108 次