5,006
社区成员
发帖
与我相关
我的任务
分享
<html id="_html">
<script>
function op(id) {
var off = document.getElementById(id);
return id + " offsetParent : " + (!!off.offsetParent ? off.offsetParent : "null");
}
window.onload = function() {
document.getElementById("info").innerHTML =
op("_body") + "</br>" + op("_html");
}
</script>
<body id="_body">
<div id="info"></div>
</body>
</html>
可见,html和body的offsetParent 都不存在。这时,不存在兼容性问题。<html id="_html">
<script>
function op(id) {
var off = document.getElementById(id);
return id + " offsetParent : " + (!!off.offsetParent ? off.offsetParent.id : "null");
}
window.onload = function() {
document.getElementById("info").innerHTML =
op("_fixed");
}
</script>
<body id="_body">
<div id="_fixed" style="position:fixed;">fixed</div>
<div id="info"></div>
</body>
</html>
此时,存在兼容性问题。<html id="_html">
<script>
function op(id) {
var off = document.getElementById(id);
return id + " offsetParent : " + (!!off.offsetParent ? off.offsetParent.id : "null");
}
window.onload = function() {
document.getElementById("info").innerHTML = op("_normaldiv");
}
</script>
<body id="_body">
<div id="_positioned" style="position:relative;">
<div id="second">
<div id="_normaldiv"></div>
</div>
</div>
<div id="info"></div>
</body>
</html>
所有浏览器中的输出都是:_normaldiv offsetParent : _positioned<html id="_html">
<script>
function op(id) {
var off = document.getElementById(id);
return id + " offsetParent : " + (!!off.offsetParent ? off.offsetParent.id : "null");
}
window.onload = function() {
document.getElementById("info").innerHTML = op("_normaldiv");
}
</script>
<body id="_body">
<div id="_positioned" style="position:relative;">
<div id="first" style="width:100px;">
<div id="second">
<div id="_normaldiv"></div>
</div>
</div>
</div>
<div id="info"></div>
</body>
</html>
这时,情况发生变化了,IE6/IE7/IE8(Q) 中的输出变成了:_normaldiv offsetParent : first<html id="_html">
<script>
function op(id) {
var off = document.getElementById(id);
return id + " offsetParent : " + (!!off.offsetParent ? off.offsetParent.id : "null");
}
window.onload = function() {
document.getElementById("info").innerHTML = op("_normaldiv");
}
</script>
<body id="_body">
<div id="_positioned">
<div id="first" style="width:100px;">
<div id="second">
<div id="_normaldiv"></div>
</div>
</div>
</div>
<div id="info"></div>
</body>
</html>
IE6/IE7/IE8(Q) 中输出:_normaldiv offsetParent : first<html id="_html">
<script>
function op(id) {
var off = document.getElementById(id);
return id + " offsetParent : " + (!!off.offsetParent ? off.offsetParent.id : "null");
}
window.onload = function() {
document.getElementById("info").innerHTML =
op("_th") + "<br/>" + op("_td") + "<br/>" +
op("_positoinedinth") + "<br/>" + op("_positoinedintd") + "<br/>" +
op("_inth") + "<br/>" + op("_intd") + "<br/>";
}
</script>
<body id="_body">
<table id="_table">
<tr id="_tr">
<th id="_th">
<div id="_inth">in th</div>
<div id="_positoinedinth" style="position:relative;">positoined in th</div>
</th>
<td id="_td">
<div id="_intd">in tr</div>
<div id="_positoinedintd" style="position:relative;">positoined in th</div>
</td>
</tr>
</table>
<div id="info"></div>
</body>
</html>
从上面测试代码中,可以看出: