最近在做一个自适应高度的加载时的瀑布效果，使用加载完毕后为其一个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. svnversion - 为工作代码产生一个紧缩的 (compat) 版本号

    SYNOPSIS 总览 svnversion wc_path [trail_url] OVERVIEW 概述 Subversion 是一个版本控制系统,允许保存旧版本的文件和目录 (通常是源代码),保 ...

  2. React defaultProps

    defaultProps // 为属性指定默认值:Greeting.defaultProps = { name: 'Stranger'}; defaultProps 用来确保 this.props.n ...

  3. org.springframework.web.servlet.DispatcherServlet异常

    org.springframework.web.servlet.DispatcherServlet: No mapping found for HTTP request with URI [/] in ...

  4. xshell本地上传文件到Ubuntu上及从Ubuntu上下载文件到本地

    1.第一种方法是最常用的 :如果下载了Xshell和Xftp,Ctrl+Alt+F就可以选择文件的互传了!(虚拟机/云服务器通用)--只要相互间能ping得通. 2.第二种方法 :ubuntu环境下安 ...

  5. Case Closed?

    Finally, we'll want a way to test whether a file we've opened is closed. Sometimes we'll have a lot ...

  6. 线段树求后继+环——cf1237D

    /* 首先开三倍消环(两倍是不够的),倒序求值,线段树找一下后继即可 */ #include<bits/stdc++.h> using namespace std; #define N 3 ...

  7. PHP fpassthru() 函数

    定义和用法 fpassthru() 函数输出文件指针处的所有剩余数据. 该函数将给定的文件指针从当前的位置读取到 EOF,并把结果写到输出缓冲区. 语法 fpassthru(file) 参数 描述 f ...

  8. Dubbo入门到精通学习笔记（十五）：Redis集群的安装（Redis3+CentOS）、Redis集群的高可用测试（含Jedis客户端的使用）、Redis集群的扩展测试

    文章目录 Redis集群的安装(Redis3+CentOS) 参考文档 Redis 集群介绍.特性.规范等(可看提供的参考文档+视频解说) Redis 集群的安装(Redis3.0.3 + CentO ...

  9. Linux源码与编译出的目标文件汇编代码的一致性问题

    start_kernel是内核启动时比较重要的一个函数,然而我发现一个问题,我编译出来的目标文件中的汇编代码与C源码并不完全对应,这是怎么一回事呢? asmlinkage void __init st ...

  10. ThreeJS模型展示为黑色，模型出不来

    选取gltf格式时,出现模型为黑色,模型出不来 原因: 我们设计部可能是用maya或者3dmax去做:在模型导出时,没有gltf格式:如果maya或者3dmax导出obj然后导进blender,再导出 ...