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

时间：2021-05-25

因需要定位某个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>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章