offsetLeft的问题

今天写了个走马灯的图片轮播，想用offsetLeft算轮播距离的，但获取距离发现firefox下总是不对，经过调试发现offsetLeft和offsetParent在ie和firefox下还是有去多分歧的。

最终发现：

当父元素（position:relative）有border且overflow:hidden时，在firefox下子元素(position:absolute)的offsetleft竟然是负的border值，ie下为o，正常

代码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>new</title>
<script type="text/javascript">
//<![CDATA[
window.onload=function(){
    var nn =document.getElementById("nn");
    var mm =document.getElementById("mm");
    var cc =document.getElementById("cc");
    cc.value="mm.offsetLeft:" + mm.offsetLeft + "___" + "mm.offsetParent:" + mm.offsetParent.tagName;
}
//]]>
</script>
</head>
<body>
<div style="width:200px;height:200px;border:10px solid red;position:relative;overflow:hidden;" id="nn"><div id="mm" style="height:20px;background-color:#ccc;position:absolute;top:0;left:0;">1234556</div></div>
<textarea cols="50" rows="50" id="cc"></textarea>
</body>
</html>

 

测试发现，firefox下的offsetlef为负值，然后把nn的overflow去掉或把nn的border去掉就与ie一样了，为o

不得已只好在最外层在套一层div，在这层div上设置border

ps：同时可以发现当父元素（div）没有绝对定位时，子元素的offsetParent,ie下还为此父元素，但firefox下却变成了body

posted @ 2010-06-24 02:52  kitemao  阅读(904)  评论(0)    收藏  举报