最近在做一个自适应高度的加载时的瀑布效果,使用加载完毕后为其一个A容器设置style的高度的方式完成(原高度为0且超出部分裁剪),使用offsetHeight获取其子元素高度(所有子元素高度均相等),完成后,A容器底部总是比预期长了一点。

查了一下资料,发现offsetHeight得到的是元素的整数高度,而我的子元素高度为浮点数且小数第一位大于4,所以我就去看了看子元素各自的高度,发现设置了font-size且未设置line-htight的元素(我设置的大小为14px),其高度会变成x.5,设置line-height为1.5em之后就没问题了(当然前提是font-size为偶数)。

关于元素的offsetHeight、line-htight的更多相关文章

  1. JS获当前网页元素高度offsetHeight

    本文测试的是offsetHeight,获取网页中某元素的高度,单位是像素,获取的类型是整型,可以进行数字运算.如图,网页中的元素本身的高度包括,自身的内容+padding+border,而margin ...

  2. jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...

  3. offsetHeight, clientHeight与scrollHeight的区别

      在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论.以下结论皆是在标准模式下测试通过的,没有测试quirk模式. clientHeight 大部分浏览器对 clientHe ...

  4. offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight

    w3c规范,请戳这里:http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetparent 一.offsetParent 英文解读: part o ...

  5. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  6. Bootstrap3 排版-内联文本元素

    标记文本 突出显示的文本由于其相关性在另一个上下文中,使用<mark>标记. You can use the mark tag to highlight text. You can use ...

  7. clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    clientHeight:包括padding但不包括border.水平滚动条.margin的元素的高度.对于inline的元素这个属性一直是0,单位px,只读元素. offsetHeight:包括pa ...

  8. scrollTop、offsetHeight和offsetTop等属性用法详解--转转转

    scrollTop.offsetHeight和offsetTop等属性用法详解: 标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼 ...

  9. offsetTop/offsetHeight scrollTop/scrollHeight 的区别

    offsetTop/offsetHeight   scrollTop/scrollHeight  这几个属性困扰了我N久,这次一定要搞定. 假设 obj 为某个 HTML 控件. obj.offset ...

随机推荐

  1. Recall,Precision,ROC曲线的介绍

    https://www.jianshu.com/p/f154237924c4 (ROC讲解) https://blog.csdn.net/saltriver/article/details/74012 ...

  2. Android AppCompatActivity去掉actionbar fullScreen

    网上已经有很多关于这个问题的解决方案,如果你试了都没有解决,那么请往下看.首先说下网上说的解决方案: 方案一:在AndroidManifest.xml中,为需要进行全屏显示的activity添加如下主 ...

  3. ES模块的基本用法常见使用问题

    本文作者:高峰,360奇舞团前端工程师,W3C WoT工作组成员. ES6中引入了模块(Modules)的概念,相信大家都已经挺熟悉的了,在日常的工作中应该也都有使用. 本文会简单介绍一下ES模块的优 ...

  4. dubbo管理平台安装

    dubbo-admin.war可在网上百度去下载,但是我下载了好几个,发布上去服务启动都报错,这个时候大概是我们系统的JDK和编译dubbo-admin.war的JDK版本不同导致的了,强烈建议自己下 ...

  5. 同步类容器和并发类容器——ConcurrentMap、CopyOnWrite、Queue

     一 同步类容器同步类容器都是线程安全的,但在某些场景中可能需要加锁来保证复合操作. 符合操作如:迭代(反复访问元素,遍历完容器中所有元素).跳转(根据指定的顺序找到当前元素的下一个元素).条件运算. ...

  6. mysql字段类型不是整型的排序问题

    今天想按从小到大的顺序重数据库提取数据,发现取出的数据不是按顺序排的,经检查之后发现是mysql保存的字符类型是varchar,但是值是整数,解决办法:把排序字段+0; SELECT * FROM u ...

  7. Oracle系列教程之一软件安装与卸载

    1.安装软件 软件下载地址:https://www.oracle.com/technetwork/cn/database/enterprise-edition/downloads/index.html ...

  8. Vue学习笔记【24】——Vue组件(组件切换)

    使用flag标识符结合v-if和v-else切换组件 页面结构:(缺点:只适用于两个组件间切换,不适合多个)  <div id="app">    <input ...

  9. FS获取KERNEL32基址的三种方法

    FS寄存器指向当前活动线程的TEB结构(线程结构) 偏移  说明 000  指向SEH链指针 004  线程堆栈顶部 008  线程堆栈底部 00C  SubSystemTib 010  FiberD ...

  10. json格式化在线工具推荐

    现在系统对接基本都采用json格式的报文,杂乱无章的json让人看起来头大,这里推荐一款在线格式化json的工具, 工具地址: http://www.matools.com/json 这个在线Json ...