SD9018: IE6 IE7 IE8(Q) 在某些情况下 DOM 元素的 offsetTop、offsetLeft 的返回值参照元素以及 offsetParent 为距离其最近的触发了 hasLay
2013-05-13 21:42
706 查看
标准参考
无。
问题描述
在 IE6 IE7 IE8(Q) 中,一个 'position' 特性值为 'static' 的元素的 offsetParent 可能会是其最近的、触发了 hasLayout 的父元素。同时其 offsetTop、offsetLeft 的返回值参照元素也是距离其最近的触发了 hasLayout 的祖先级元素。
造成的影响
对于元素的 offetParent,由于可能取得的元素不一致,造成页面脚本运行出现不一致或出错。另外由于元素的 offsetLeft、offsetTop 计算值都参照它的 offsetParent,因此元素的 offsetLeft、offsetTop 值也会不一致。
受影响的浏览器
IE6 IE7 IE8(Q) |
---|
问题分析
元素 A 的 offsetParent 的计算遵从下面的算法:若以下任何一种情况为真,则返回 null 并停止此算法:
A 没有关联一个 CSS 布局框。
A 是根元素。
A 是 HTML 文档中的 BODY 元素。
A 的 'position' 特性的计算值为 'fixed'。
若 A 是一个 AREA 元素,且其某个祖先元素是 MAP 元素,则返回其最近的 MAP 祖先元素并停止此算法。
返回 A 的最近的一个存在着的祖先元素并停止此算法,当下列条件至少满足一条时:
祖先元素的 'position' 特性的计算值不为 'static'。
祖先元素为 HTML 文档中的 BODY 元素。
A 的 'position' 特性的计算值为 'static',且祖先元素是下列 HTML 元素之一:TD、TH 或 TABLE。
返回 null。
关于 offsetTop、offsetLeft、offsetParent 的更多信息,请参考 CSSOM View Module 草案 8.1
The offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight attributes 中的内容。
测试以下代码:
<!DOCTYPE html> <html> <head> <script> function $(id) { return document.getElementById(id); } window.onload = function () { $('info').innerHTML += '<br />P\'s offsetParent: ' + $('P').offsetParent.tagName; $('info').innerHTML += '<br />P\'s offsetTop: ' + $('P').offsetTop; $('info').innerHTML += '<br />P\'s offsetLeft: ' + $('P').offsetLeft; } </script> </head> <body style="margin:0; font:18px 'Trebuchet MS';"> <div style="float:left; margin:50px; background:wheat;"> <p id="P" style="width:50px; height:50px; margin:50px; background:plum;">P</p> </div> <div id="info" style="clear:left;"></div> </body> </html>
此例中,依照 W3C 草案的规则,P 的 offsetParent 应为 BODY 元素,且其 offsetTop、offsetLeft 的返回值也均参照 BODY 元素。
实际结果如下:
IE6 IE7 IE8(Q) | IE8(S) Firefox Chrome Safari Opera |
---|---|
的祖先元素。
解决方案
可考虑对于为在 IE 中触发了 hasLayout 特性的元素设置 'position' 特性值为非 'static' 值,如 'relative',或避免使用元素的 offsetTop、offsetLeft、offsetParent 属性。
测试环境
操作系统版本: | Windows 7 Ultimate build 7600 |
---|---|
浏览器版本: | IE6 IE7 IE8 Firefox 3.6.12 Chrome 8.0.552.18 dev Safari 5.0.2 Opera 10.63 |
测试页面: | offsetParent.html |
本文更新时间: | 2010-10-28 |
关键字
offsetParent offsetLeft offsetTop hasLayout position static原文地址:http://www.w3help.org/zh-cn/causes/SD9018
相关文章推荐
- IE6IE7IE8(Q) 中元素的 'padding-top' 遇到 'clear' 特性在某些情况下复制到 'padding-bottom'
- IE6 IE7 IE8(Q) 中定位元素 'z-index' 为默认值在某些情况下会产生新的层叠上下文
- 无定位父元素时offsetParent为body,但是offsetTop/offsetLeft计算距离从html开始
- IE6 IE7 IE8(Q) 中行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部
- DOM中的scrollWidth(Height/Left/Top),offsetWidth(Height/Left/Top)以及clientWidth(Height/Left/Top)
- HO3003: IE6 IE7 IE8(Q) 中 IMG 元素的 alt 属性在没有 title 属性的情况下会被当作提示信息使用
- javascript获得元素的尺寸和位置一 : offsetTop/Left、offsetWidth/Height、offsetParent
- JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值
- 元素的offsetParent offsetLeft offsetTop属性
- SD9001: IE6 IE7 IE8(Q) 中的 getElementById 方法能以 name 属性为参数获取某些元素
- DOM元素的各种尺寸offsetHeight/Width,clientHeight/clientWidth,offsetLeft/Top,
- javascript和Jq获取和设置页面元素到顶部、左部距离、宽高元素卷入部分(scroll、scrollTop、scrollLeft、offset、offsetTop、offsetLeft)
- offsetLeft, offsetTop以及postion().left , postion().top有神马区别
- JS获得指定元素距离浏览器顶部的距离offsetTop
- RB1001: IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常
- javascript获得元素的尺寸和位置一 : offsetTop/Left、offsetWidth/Height、offsetParent
- ie6 ie7 ie8 共存以及Firefox浏览器CSS兼容写法
- JS中的offsetParent和parentNode 以及 获取元素相对body的偏移值
- IE6、IE7、IE8、FF对空标签块状元素解释的不同点
- js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较