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
投稿猜你喜欢
- 这10个asp处理网页编码转换的函数，不知何时收藏在我的电脑中，今天刚好看到了，拿出来与大家分享，这里各种常见的网页编码问题已经
- 代码如下:--函数 CREATE function fn_GetPy(@str nvarchar(4000)) returns nvarch
- 阅读上一篇：javascript面向对象编程（一）[javascript模拟传统OOP]javascript是一种非常灵活的语言，它的灵活度
- 有使用过VS2005开发工具的朋友或者其他语句如js中都有Try catch 语句块，那么在mysql中是否能有SQLserver的@@er
登录页面能访问得到，但当执行下级目录的文件就不行了，浏览器直接跳出以下错误页面： 除些以外没有任何其它有价值的信息，因为此网站在我的电脑上执- 我们已经知道Application和Session对象的OnStart、OnEnd事件的脚本，都必须是在 Global.asa&n
- <％ dim result,result1 str="ad_asp之家_nzlkjlkfjoj
- 最近在学习正则，一些比较有用的东西怕忘记，记下来，比较乱，想一条记录一条：正则表达式在线测试//匹配文本，这个偶尔比较好用，但是要小心字符中
- 'subject 信息标题 'company 发布信息的公司名称 'cont
- 如何在网站上提供音乐下载？为用户提供歌曲下载，一般有两种方式，一是直接通过Http，浏览器下载，二是通过ftp协议下载。我们来用Http和浏
- 你家中的CD、VCD一定很多吧？是不是常遇到为找一张CD把一抽屉的碟子翻得乱七八糟的情况，你一定没少受埋怨——你不想整理它们一下？如：影片是
- 首先呢，需要有两个mysql服务器。如果做测试的话可以在同一台机器上装两个mysql服务程序，注意要两个运行程序的端口不能一样。我用的是一个
- Facebook的网站速度做为最关键的公司任务之一。在2009年，我们成功地实现了Facebook网站速度提升两倍 。而正是我们的工程师团队
- 数据库计算机 databasecomputer 实现数据库的存储、管理和控制的一种专用计算机系统。它能十分快速而有效地完成各种数据库操作，并
- server application error－－IIS故障故障现象：Server Application Error The serve
- 问题：如何用ASP实现点击数统计？比如我要实现某篇文章被浏览一次就增加一个点击数，该怎么做?回答：就是说，比如，你的页面是：shownews
- 网上有许关于固定表格的标题行的文章，但是既要固定标题行又要固定标题列的却几乎没有。现我写下如下代码以供大家参考：<html> &
- 前两天看的时候，所用的歌曲地址加密方式已变更。将以前的发出来供大家赏玩。解密函数是从flash里面反编译出来的，加密函数是自己根据解密函数写
- 渲染引擎渲染引擎的职责是……渲染，也就是把请求的内容显示到浏览器屏幕上。默认情况下渲染引擎可以显示HTML，XML文档以及图片。 通过插件（
- 此文章主要向大家描述的是MySQL高级查询方法之记录查询的实际操作步骤，以及对其实际操作过程中要用到的代码的详细描述，以下就是文章的主要内容
