最近在做一个自适应高度的加载时的瀑布效果,使用加载完毕后为其一个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. k8s容器-节点部署篇

    一. k8s节点部署 1. 环境规划 系统环境概述 系统环境说明 操作系统 Ubuntu16.04 or CentOS7 选的是CentOS7        -        Kubernetes版本 ...

  2. 笔记66 Spring Boot快速入门(六)

    SpringBoot中使用Mybatis 一.注解方式 1.创建映射文件CategoryMapper.java 使用注解@Mapper 表示这是一个Mybatis Mapper接口.使用@Select ...

  3. 笔记65 Spring Boot快速入门(五)

    SpringBoot+JPA 一.什么是JPA? JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期 ...

  4. Java中的时间日期Date和Calendar

    日期时间类 Date: Date类的构造方法: 可以发现Date类的toString方法被重写了. Date类的方法: SimpleDateFormat 它提供了解决Date输出问题的解决方案--格式 ...

  5. 【JZOJ3920】噪音

    description FJ有M个牛棚,编号1至M,刚开始所有牛棚都是空的.FJ有N头牛,编号1至N,这N头牛按照编号从小到大依次排队走进牛棚,每一天只有一头奶牛走进牛棚.第i头奶牛选择走进第p[i] ...

  6. Java桌球小游戏

    版本一.出现窗口package cn.xjion.game;/** * 出现窗口 * @author xjion * */import java.awt.*;import javax.swing.*; ...

  7. 用Nginx搭建CDN服务器方法-开启Nginx缓存与镜像,自建图片服务器

    利用Nginx的proxy_cache搭建缓存服务器一:编译ngx_cache_purge1.Nginx的Proxy_cache是根据Key值md5哈希存储缓存,支持任意的Key,例如你可以根据”域名 ...

  8. ajax url地址

    当前网址 http://localhost:8080/exam_paper/402881ec5c3924ec015c394ee4210000/set_questions ajax请求url var u ...

  9. HCW 19 Team Round (ICPC format) H Houston, Are You There?(极角排序)

    题目链接:http://codeforces.com/gym/102279/problem/H 大致题意: 你在一个定点,你有个长度为R的钩子,有n个东西在其他点处,问你能勾到的东西的数量是多少? 思 ...

  10. \t \r \n转义字符

    t \r \n都是转义字符,空格就是单纯的空格,输入时可以输入空格 \t 的意思是 横向跳到下一制表符位置 \r 的意思是 回车 \n 的意思是回车换行 所有的转义字符和所对应的意义: 转义字符 意义 ...