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
猜你喜欢
- 如下所示:with tf.GradientTape(persistent=True) as tape: z1 = f(w1, w2 + 2.
- 起步在Python中,对于一个对象的属性访问,我们一般采用的是点(.)属性运算符进行操作。例如,有一个类实例对象foo,它有一个name属性
- 本文研究的主要是Python处理文本换行符的相关内容,具体如下。源文件每行后面都有回车,所以用下面输出时,中间会多了一行try:  
- 1. 为什么要有转义?ASCII 表中一共有 128 个字符。这里面有我们非常熟悉的字母、数字、标点符号,这些都可以从我们的键盘中输出。除此
- 方法一:<code class="language-python">""" 根
- 这个仿msn的右下角popup提示窗口效果很久以前收集的,现在整理出来给大家分享,需要的朋友可以拿去用,特点,提示窗口内容和js代码分离容易
- 为了今天要写的内容,运行了将近7个小时的程序,在数据库中存储了1千万条数据。——今天要说的是mysql数据库的IF()函数的一个实例。 具体
- 如下所示:# u [32,30,200]# u_logits [400,32,30]q_j_400 = [] for j in range(
- 1、项目背景对于不会PS的小伙伴,抠图是一个难度系数想当高的活儿,某宝照片抠图和证件照换底色均价都是5元RMB,所以今天要介绍的这款神工具,
- 简介mysql的innodb引擎查询记录时在无法使用索引覆盖的场景下,需要做回表操作获取记录的所需字段。mysql执行sql前会执行sql优
- 关于yii2配置操作多个数据库进行操作,文档上面也给出了具体的配置,一个实战性的例子,也是很简单的,我们这里以权限控制为单个管理库dbnam
- 将json多行数据传入到mysql中使用python实现表需要提前创建,字符集utf8 如果不行换成utf8mb4import jsonim
- 本文实例讲述了mysql、mssql及oracle分页查询方法。分享给大家供大家参考。具体分析如下:分页查询在web开发中是最常见的一种技术
- js原生方法map实现<!DOCTYPE html><html lang="en"><he
- import randomdef genrand(small, big) : return small
- 1.regex-coach ——正则表达式工具2. IECookiesView——IE的cookie查看工具3.Flex Trace Pan
- 故障表现一方面 :在阿里云控制台云数据库PolarDB对应的集群管理页面上,在诊断与优化模块里面的一键诊断会话管理中,发现某条update
- 看代码吧~class ConvNet(nn.module): def __init__(self, num_cla
- 前言:目前在研究易信公众号,想给公众号增加一个获取个人交通违章的查询菜单,通过点击返回查询数据。以下是实施过程。一、首先,用火狐浏览器打开X
- <html xmlns="http://www.w3.org/1999/xhtml"><head>