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

因需要定位某个HTML元素（例如:div）距离页顶的高度，想用offsetTop来取值，结果却发现CSS中如果使用了float:left;之类的写法后，竟然会导致取到的值不一样。

没有使用float:left;取的到值是正常值200;
<!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>Float对offsetTop的影响</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta name="Copyright" content="(c)" />
<meta name="Author" content="CNLei" />
<style type="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>
<script type="text/javascript">
<!--
function ShowIt(o) {
 alert(o.offsetTop);
}
-->
</script>
</head>
<body>
<div id="Top">#Main {padding:100px;} 没有使用float属性，取到的offsetTop的值正常：200。</div>
<div id="Main">
 <div id="IECN" onclick="ShowIt(this);">点击此处试试</div>
</div>
</body>
</html>

使用了float:left;后，取的值却变成了100,平白无故的少了100 
<!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>Float对offsetTop的影响</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta name="Copyright" content="(c)" />
<meta name="Author" content="CNLei" />
<style type="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>
<script type="text/javascript">
<!--
function ShowIt(o) {
 alert(o.offsetTop);
}
-->
</script>
</head>
<body>
<div id="Top">#Main {padding:100px;float:left;} 使用了float属性，取到的offsetTop的值只有100了，无故少了100。</div>
<div id="Main">
 <div id="IECN" onclick="ShowIt(this);">点击此处试试</div>
</div>
</body>
</html>

赞 (0)

相关推荐

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

    因需要定位某个HTML元素(例如:div)距离页顶的高度,想用offsetTop来取值,结果却发现CSS中如果使用了float:left;之类的写法后,竟然会导致取到的值不一样. 没有使用float:left;取的到值是正常值200; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

  • 详细分析css float 属性以及position:absolute 的区别

    详细分析css float 属性以及position:absolute 的区别

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块级元素,会单独占据一行. 先看看最基本的块级元素如何排列的.html代码,以下样式都是基于此. 复制代码 代码如下: <div class="boxBg">        <div class="box1">        框框1       

  • 浅谈sqlserver下float的不确定性

    很多时候,大家都知道,浮点型这个东西,本身存储就是一个不确定的数值,你永远无法知道,它是 0 = 0.00000000000000123 还是 0 = 0.00000000000999这样的东西.也许一开始使用的时候没有问题,但是有时候做统计的时候,就会看出端倪 简单的举个例子,就知道统计的时候,有可能出现意外的效果,导致可能需要存储过程或者接收程序的代码左额外的取舍数位的处理,所以在此其实我是推荐使用Numeric来替代float进行一个替代使用,避免一个sum ,然后明明明细看每一条数据都是

  • 解决vue A对象赋值给B对象,修改B属性会影响到A的问题

    实际在vue中 this.A = this.B,没有进行深层赋值,只是把this.A的地址指向了与this.B相同的地址,所有对于A的修改会影响到B. 解决相互影响的思路是在this.A必须是新建的一个对象,这样才能保证不被指向同一地址,属性修改不会相互影响. 解决方式: this.A=JSON.parse(JSON.stringify(this.B)); 将对象转成字符串剔除对象属性后,再转换成对象赋值,这样能解决指向相同地址修改会相互影响的问题. 以上这篇解决vue A对象赋值给B对象,修改

  • 解决mybatis无法给带有下划线属性赋值问题

    目录 mybatis无法给带有下划线属性赋值问 1.配置问题 2.增加set方法转换值的方式 解决方法 实体类中有下滑线字段无法赋值问题 mybatis无法给带有下划线属性赋值问 1.配置问题 <!-- 是否开启自动驼峰命名规则(camel case)映射, --> <setting name="mapUnderscoreToCamelCase" value="true"/> 或者 //开启驼峰映射         bean.getObjec

  • C#中float的取值范围和精度分析

    C#中float的取值范围和精度分析

    本文实例分析了C#中float的取值范围和精度.分享给大家供大家参考.具体分析如下: float类型的表现形式: 默认情况下,赋值运算符右侧的实数被视为 double. 因此,应使用后缀 f 或 F 初始化浮点型变量,如以下示例中所示: float x = 3.5F; 如果在以上声明中不使用后缀,则会因为您尝试将一个 double值存储到 float 变量中而发生编译错误. float的取值范围 float占用4个字节,和int是一样,也就是32bit. 1bit(符号位) 8bits(指数位)

  • 浅谈DOCTYPE对$(window).height()取值的影响

    前言:公司项目需要用到一个弹框垂直居中,网上类似的垂直居中弹出层大同小异,因为项目是基于Jquery 下的,所以用$(window).height()-layer.height())/2 +$(document).scrollTop()取得垂直的位移.测了各种浏览器没问题,后台人员移值到项目中后,出问题了,当页面超出一屏时,在 chrome和FF下,弹出框不是在当前屏的垂直居中,而是相对于整个网页的居中. 查阅各方资料,所有结论都指出: 1.窗口高度,$(window).height() 2.文

  • jquery下checked取值问题的解决方法

    一怒之下,给checkbox加一个isCheck,,不用那该死的checked属性...一切OK了...代码如下: 复制代码 代码如下: <!DOCTYPE html > <html><head> <meta charset="UTF-8"> <title>修复checkbox的状态切换和动态取值的问题</title> <script type="text/javascript" src=

  • vue.js select下拉框绑定和取值方法

    最近在做mui+vue.js的移动项目,遇到了这个解决了,所以记录一下: 1.绑定select下拉框的代码很简单sendlist就是下拉框的集合,这个可以去看vue.js的文档: 地址:https://cn.vuejs.org/v2/api/ :value绑定的值就是这个下拉框对应的value值 <select id="sendSybol" v-model="searchDto.sendSymbolId"> <option v-for="

  • 解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

    这是一个项目中常见的需求,el-select 为下拉多选,默认值不可删除,或者指定值不可删除. 实现效果: el-select 如下源码中 tag closable 属性为 el-select 的 disabled 属性,所有明显不支持. 解决思路(从el-select 的角度来考虑,其他组件组合的情况暂不考虑) 想要实现某些选项是不删除,1.需要tag 不可删除,2.options 不可选择 options 不可选择很好实现,只需要给一个disabled属性.tag 不可删除才是关键.下面是我

随机推荐