这几个属性都是IE火狐完全兼容的，不多说，看我测试结果便知：
【源码如下】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function Position(eve) {
var t = document.getElementById("div1");
var e = eve || event;
var DivOffsetTop = t.offsetTop; //=Top+MarginWidth=100+3=103
var DivOffsetleft = t.offsetLeft; //Left+MarginWidth=50+3=53
var EventTop = e.clientY;
var EventLeft = e.clientX;
var DivTop = t.style.top;
var DivLeft = t.style.left;
var DivClientTop = t.clientTop; //BorderWidth
var DivClientLeft = t.clientLeft; //BorderWidth
var DivClientWidth = t.clientWidth; //Width+2PaddingWidth=200+2*11=222
var DivClientHeight = t.clientHeight; //Height+2PaddingWidth=300+2*11=322
var DivOffsetWidth = t.offsetWidth; //=2BorderWidth+Width+2PaddingWidth=2*7+200+2*11=236
var DivOffsetHeight = t.offsetHeight; //=2BorderWidth+Height+2PaddingWidth=2*7+300+2*11=336
var BodyClientTop = document.body.clientTop;
var BodyClientLeft = document.body.clientLeft;
var DivWidth = t.style.width;
var DivHeight = t.style.height;
var DivBorderWidth = t.style.borderWidth;
var DivPaddingWidth = t.style.padding;
var DivMaginWidth = t.style.margin;
var R = "DivOffsetleft:" + DivOffsetleft + "--DivOffsetTop:" + DivOffsetTop; //103 53
R += "\nEventLeft:" + EventLeft + "--EventTop:" + EventTop; //>=103 >=53
R += "\nDivLeft:" + DivLeft + "--DivTop:" + DivTop; //100px 50px
R += "\nDivClientLeft:" + DivClientLeft + "--DivClientTop:" + DivClientTop; //7 7
R += "\nBodyClientLeft:" + BodyClientLeft + "--BodyClientTop:" + BodyClientTop; //5 5
R += "\nDivClientWidth:" + DivClientWidth + "--DivClientHeight:" + DivClientHeight; //222 322
R += "\nDivWidth:" + DivWidth + "--DivHeight:" + DivHeight; //200 300
R += "\nDivOffsetWidth:" + DivOffsetWidth + "--DivOffsetHeight:" + DivOffsetHeight; //236 336
R += "\nDivBorderWidth:" + DivBorderWidth //7px
R += "\nDivMaginWidth:" + DivMaginWidth //3px
alert(R);
}
</script>
</head>
<body style="border: 5px solid red;">
<input type="button" id="btn" value="测试位置" />
<br />
<div id="div1" style="width: 200px; height: 300px; background-color: Gray; position: absolute;
top: 50px; left: 100px; border: 7px solid red; padding: 11px; margin: 3px;" οnmοusedοwn="Position(event)">
这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容
这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容
这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容
</div>
</body>
</html>
IE效果如下：
火狐：
谷歌：
扫一扫
2444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
