在IE下:float属性会影响offsetTop的取值
在IE下:float属性会影响offsetTop的取值
发布时间:2016-12-30 来源:查字典编辑
摘要:因需要定位某个HTML元素(例如:div)距离页顶的高度,想用offsetTop来取值,结果却发现CSS中如果使用了float:left;之...

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

<>

</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">

<>

</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>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类