关于元素的offsetHeight、line-htight
最近在做一个自适应高度的加载时的瀑布效果,使用加载完毕后为其一个A容器设置style的高度的方式完成(原高度为0且超出部分裁剪),使用offsetHeight获取其子元素高度(所有子元素高度均相等),完成后,A容器底部总是比预期长了一点。
查了一下资料,发现offsetHeight得到的是元素的整数高度,而我的子元素高度为浮点数且小数第一位大于4,所以我就去看了看子元素各自的高度,发现设置了font-size且未设置line-htight的元素(我设置的大小为14px),其高度会变成x.5,设置line-height为1.5em之后就没问题了(当然前提是font-size为偶数)。
关于元素的offsetHeight、line-htight的更多相关文章
- JS获当前网页元素高度offsetHeight
本文测试的是offsetHeight,获取网页中某元素的高度,单位是像素,获取的类型是整型,可以进行数字运算.如图,网页中的元素本身的高度包括,自身的内容+padding+border,而margin ...
- jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...
- offsetHeight, clientHeight与scrollHeight的区别
在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论.以下结论皆是在标准模式下测试通过的,没有测试quirk模式. clientHeight 大部分浏览器对 clientHe ...
- offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight
w3c规范,请戳这里:http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetparent 一.offsetParent 英文解读: part o ...
- 【全面总结】js获取元素位置大小
[js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...
- Bootstrap3 排版-内联文本元素
标记文本 突出显示的文本由于其相关性在另一个上下文中,使用<mark>标记. You can use the mark tag to highlight text. You can use ...
- clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
clientHeight:包括padding但不包括border.水平滚动条.margin的元素的高度.对于inline的元素这个属性一直是0,单位px,只读元素. offsetHeight:包括pa ...
- scrollTop、offsetHeight和offsetTop等属性用法详解--转转转
scrollTop.offsetHeight和offsetTop等属性用法详解: 标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼 ...
- offsetTop/offsetHeight scrollTop/scrollHeight 的区别
offsetTop/offsetHeight scrollTop/scrollHeight 这几个属性困扰了我N久,这次一定要搞定. 假设 obj 为某个 HTML 控件. obj.offset ...
随机推荐
- JNI intArray
JNIDemo.java public class JNIDemo { static { /* 1. load */ System.loadLibrary("native"); / ...
- logging模板
logging模板是一个专门用来做日至系统的 缺点是不能指定编码格式 import logging#引入logging板块 logging.basicConfig(#这个日志的基本配置 level=, ...
- c++之初始化列表
#include<iostream> using namespace std; class Person{ public: int m_a; int m_b; int m_c; Perso ...
- vue 运行项目时,Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
npm run dev 运行项目后 验证码显示不出来 并报错 Uncaught (in promise) DOMException: Failed to execute 'open' on 'XML ...
- python判断文件的编码格式是否为UTF8 无BOM格式
转自: https://www.cnblogs.com/ferraborghini/p/4951102.html https://www.cnblogs.com/Detector/p/8744992. ...
- 【转】让应用程序支持emoji字符
什么是emoji?就是这些表情和符号:
- PHP ftp_nb_continue() 函数
定义和用法 ftp_nb_continue() 函数连续获取/发送文件.(无阻塞) 该函数返回下列值之一: FTP_FAILED(发送/获取失败) FTP_FINISHED(发送/获取成功) FTP_ ...
- 【dart学习】-- Dart之元数据
一,概述 元数据概述 元数据(Metadata),又称中介数据.中继数据,为描述数据的数据(data about data),主要是描述数据属性(property)的信息,用来支持如指示存储位置.历 ...
- 在使用element-ui搭建的表格中,实现点击"定位"按钮后,屏幕滚动到对应行的位置
背景: 一个后台管理系统,当管理员登录之后,会存在一个自己的id值, 在一个表格中,当点击"定位"按钮后,屏幕滚动到拥有管理员id的这一行,并且给设置一个高亮的背景 相关知识点: ...
- postgreSQL的主外键
--添加主键 alter table cities add PRIMARY KEY(name); --添加外键 alter table weather add FOREIGN key(city) RE ...