最近在做一个自适应高度的加载时的瀑布效果，使用加载完毕后为其一个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. vector 有点麻烦啊 能简单点么？

    #include <iostream> #include <cstdlib> #include <cstring> #include <cstdio> ...

  2. goto和函数调用

      goto: 函数调用: 作用域 label在函数内定义,所以函数内   跳转操作 无条件 调用时先保存现场,复制实际参数,然后才是跳转 生存期 由于不是左值,它没有生存期,仅在编译期有意义.   ...

  3. Sphinx + Read the docs theme

    前言: 使用Sphinx 生成文档和使用 Read The Docs 的 readthedocs/sphinx_rtd_theme,假设是在Windows上运行并已安装好 python,可以执行pyt ...

  4. python制作坦克对战

    创建子弹类 import pygame class Bullet(pygame.sprite.Sprite): def __init__(self): pygame.sprite.Sprite.__i ...

  5. 【转】SpringMVC整合websocket实现消息推送及触发

    1.创建websocket握手协议的后台 (1)HandShake的实现类 /** *Project Name: price *File Name:    HandShake.java *Packag ...

  6. 【索引】位图BitMap索引

    位图(BitMap)索引 前段时间听同事分享,偶尔讲起Oracle数据库的位图索引,顿时大感兴趣.说来惭愧,在这之前对位图索引一无所知,因此趁此机会写篇博文介绍下位图索引. 1. 案例 有张表名为ta ...

  7. 用javascript插入<style>样式

    function addCSS(cssText){ var style = document.createElement('style'), //创建一个style元素 head = document ...

  8. delphi 调用js脚本

    function ExecScript(Code,Lang,Func:string):string; var script:OleVariant; begin script:=CreateOleObj ...

  9. CF 1097D - Hello 2019 D题: Makoto and a Blackboard

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog Problem:传送门  Portal  原题目描述在最下面.  给一个数n ...

  10. 训练集(train set) 验证集(validation set) 测试集(test set)。

    训练集(train set) 验证集(validation set) 测试集(test set). http://blog.sina.com.cn/s/blog_4d2f6cf201000cjx.ht ...