浅谈IE浏览器中元素的offsetParent属性

核心提示：offsetParent属性，在MSDN中说明很简单，浅谈IE浏览器中元素的offsetParent属性，后来查了其它资料（CSSOM View Module,MDC,YDC），总算有些了解，纵看，IE8标准几乎接近DOM标准，但是IE有那么几种模式，offsetParent.tagName返回的到底是什么

offsetParent属性，在MSDN中说明很简单，后来查了其它资料（CSSOM View Module,MDC,YDC），总算有些了解，但是IE有那么几种模式，offsetParent.tagName返回的到底是什么，比较复杂。经过测试，以某元素A为例，如果A是body元素，返回的是null。得到结果如下图所示：

说明：diplay为空表示元素显示不是"none"；position这列中的self,father,grandfather,root是指元素A自身，A的父元素，一直到A的根元素。offsetParent和position是否定位，display是否为none也有关系的。

横看，大概能得出这么4个结论：

1、当元素A及它的整个祖先元素中，position都是默认值（static），不管diplay是否为none，IE8标准下，元素A的offsetParent取值是body元素，IE7标准和Quirks下返回的是元素A的根元素；

2、当元素A的祖先元素级别中某祖先元素的position不是默认值（static），diplay不为none，IE8标准，IE7标准和Quirks，元素A的offsetParent取值是已定位的祖先元素；

3、当元素A的祖先元素级别中某祖先元素的position不是默认值（static），diplay为none，IE8标准下，元素A的offsetParent取值是body元素，IE7标准和Quirks下返回的值仍是已定位的祖先元素；

4、当元素A自身的position不是默认值（static），不管diplay是否为none，IE8标准和Quirks下，元素A的offsetParent取值是body元素，IE7标准返回的值是html元素。

纵看，IE8标准几乎接近DOM标准，和Firefox返回的结果是一样的。

我的测试代码：

查看原图（大图）

其中的js代码和css代码如下：

//JS
function　　getOffset(obj){
　var　a　=　document.getElementById(obj);
　　alert("ol="+a.offsetLeft+"　"+"ot="+a.offsetTop+"　"+a.offsetParent.getAttribute("name"));
}
function　showdiv(obj){var　a　=　document.getElementById(obj);a.style.display="";}
function　hidediv(obj){var　a　=　document.getElementById(obj);a.style.display="none";}
function　handle(flg){
if(flg==1){showdiv("div1");hidediv("div2");hidediv("div3");}
if(flg==2){showdiv("div2");hidediv("div1");hidediv("div3");}
if(flg==3){showdiv("div3");hidediv("div2");hidediv("div1");}
}
//CSS
　　#bigdiv{width:300px;height:90px;background-color:#f1f1f1;}
　　ul,p{margin:0;}
　　ul>li{display:inline;　padding-left:3px;cursor:pointer;margin:0;}
　　img{padding-left:45px;border:0;　}
　　#div1,#div2,#div3{background-color:#c1c1c1;}