在IE下:float属性会影响offsetTop的取值

      2020-08-02 06:13      编程语言
因需要定位某个HTML元素(例如:div)距离页顶的高度,想用offsetTop来取值,结果却发现CSS中如果使用了float:left;之类的写法后,竟然会导致取到的值不一样。

没有使用float:left;取的到值是正常值200;
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Float对offsetTop的影响</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<metaname="Copyright"content="(c)"/>
<metaname="Author"content="CNLei"/>
<styletype="text/css"media="all">
body{margin:0;padding:0;}
#Top{height:100px;}
#Main{padding:100px;}
#IECN{width:200px;height:50px;background:#f00;color:#fff;}
</style>
<scripttype="text/javascript">
<!--
functionShowIt(o){
alert(o.offsetTop);
}
-->
</script>
</head>
<body>
<divid="Top">#Main{padding:100px;}没有使用float属性,取到的offsetTop的值正常:200。</div>
<divid="Main">
<divid="IECN"onclick="ShowIt(this);">点击此处试试</div>
</div>
</body>
</html>

使用了float:left;后,取的值却变成了100,平白无故的少了100
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Float对offsetTop的影响</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<metaname="Copyright"content="(c)"/>
<metaname="Author"content="CNLei"/>
<styletype="text/css"media="all">
body{margin:0;padding:0;}
#Top{height:100px;}
#Main{padding:100px;float:left}
#IECN{width:200px;height:50px;background:#f00;color:#fff;}
</style>
<scripttype="text/javascript">
<!--
functionShowIt(o){
alert(o.offsetTop);
}
-->
</script>
</head>
<body>
<divid="Top">#Main{padding:100px;float:left;}使用了float属性,取到的offsetTop的值只有100了,无故少了100。</div>
<divid="Main">
<divid="IECN"onclick="ShowIt(this);">点击此处试试</div>
</div>
</body>
</html>