IE6/7关于 Absolute Position 、relative 的一些意外
时间：2008-11-27 11:34:00
网上广泛流传的取 object 的绝对位置的做法是：
var getAbsPos = function(pTarget){
pTarget = JObj.$(pTarget);
var x_ = y_ = 0;
if(pTarget.style.position != "absolute"){
while(pTarget.offsetParent){
x_ += pTarget.offsetLeft;
y_ += pTarget.offsetTop;
pTarget = pTarget.offsetParent;
}
}
x_ += pTarget.offsetLeft;
y_ += pTarget.offsetTop;
return {x:x_,y:y_};
}
和上面的代码基本一至（这段代码是我在长期实践中做的一些调整）。
IE8,FF,Opera,Safari下都没有问题（因为各个浏览器的一些表现不一，所以数值上有少许差别，几个像素而以）。
如果不是特殊情况，IE6,7也没有问题。
但是，我在做一个东东的时候，却在IE6/7下得到意想不到的值（注：特殊环境），如下面的代码：
这段代码请用 IE6/7执行
运行后，最上面有一些输出：
IE8为：
A.(0) -> DIV.section(250) -> DIV.right(225) -> DIV.com_directory(5) -> DIV.col1 (5) -> DIV.body(0) -> DIV.yesido(135) ->
Total Offset Left:620
IE7为：
A.(0) -> DIV.section(250) -> DIV.right(230) -> DIV.com_directory(980) -> DIV.col1 (5) -> DIV.body(0) -> DIV.yesido(126) ->
Total Offset Left:1591
IE6为：
A.(0) -> DIV.section(250) -> DIV.right(-750) -> DIV.com_directory(980) -> DIV.col1 (5) -> DIV.body(0) -> DIV.yesido(126) ->
Total Offset Left:611
FF为：
A.(250) -> DIV.right(225) -> DIV.com_directory(5) -> DIV.col1(5) -> DIV.body(0) -> DIV.yesido(140) ->
Total Offset Left:625
Opera为：
A.(250) -> DIV.right(225) -> DIV.com_directory(5) -> DIV.col1 (5) -> DIV.body(0) -> DIV.yesido(137) ->
Total Offset Left:622
Safari为：
A.(250) -> DIV.right(225) -> DIV.com_directory(5) -> DIV.col1 (5) -> DIV.body(0) -> DIV.yesido(140) ->
Total Offset Left:625
IE7下：1591,这个很扎眼，
IE6下：DIV.right(-750) 也很扎眼。
到底是为什么呢？我做过一些测试，在那段代码中有标出，如果去掉：
<!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-->
这一段，IE7下：
A.(0) -> DIV.section(250) -> DIV.right(230) -> DIV.com_directory(5) -> DIV.col1 (5) -> DIV.body(0) -> DIV.yesido(129) ->
Total Offset Left:619
正常。
IE6下：
A.(0) -> DIV.section(250) -> DIV.right(-750) -> DIV.com_directory(5) -> DIV.col1 (5) -> DIV.body(0) -> DIV.yesido(126) ->
Total Offset Left:-364
不正常。
其它浏览器（包括IE8）一切正常。
如果不去掉：
<!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-->
而是把：
.com_directory {
POSITION: relative;/*8888888888888888888888888888888888*/
}
换成：
.com_directory {
POSITION: absolute;/*8888888888888888888888888888888888*/
}
或是：
.com_directory {
}
IE7/IE6:
A.(0) -> DIV.section(250) -> DIV.right(230) -> DIV.col1 (5) -> DIV.body(0) -> DIV.yesido(126) ->
Total Offset Left:611
正常。其它浏览器也正常。
但是现实中，你不可能对一个 comment (HTML 注释)做操作，我测试过，即使那段注释是其它的，比如：<br />,IE7下正常;比如：<div style="clear:both"></div> IE6下正常。真的是变化莫测。
细心观察，你可以发现IE下的 offsetParent 和其它浏览器的 offsetParent 不一样！
上面这些不知道您看懂了没有。
或许您有其它的更好的取绝对位置的方法，请您共享一下。
yangedie: 获取位置，我都是用obj.getBoundingClientRect()
我佛山人:参考下mootools 1.2.1的Element.Dimensions.js
0
投稿猜你喜欢
面向对象设计过程中必须遵守的相关准则
XMLHTTP获取web造访头信息和网页代码
ajax 同步请求和异步请求的差异分析
让数据站住脚-浅谈用户研究中的信度与效度
ASP生成静态页面的方法
一个用JavaScript写的本周是本学期第几周的程序
IE和Firefox的js兼容性整理
通过模版字符串及JSON数据进行目标内容整理的一个小方法
在js中的replace方法详解
Excute后都需要返回一个RecordSet对象吗？
asp是的日期转换为星座的函数
ServerXMLHTTP的超时设置（setTimeouts）参数含义
asp封装dll源码分享
CSS文件的编码要和页面的编码相一致
推荐9款很棒的网页绘制图表JavaScript框架脚本
