javascript - 元素的高度显示异常的问题

问题描述

问 题

这是DOM结构

这是样式

目前情况是li的高度有100;

而a标签高度只有29;这个li也没有其他的样式

请问这是什么原因造成的 又该如何解决呢

解决方案

在li上也设置font-size即可

li {
    font-size: 0.22rem;
}

或者给a增加

a {
    display: block;
}

大概原因好像是：

li 是块元素，font-size 和 line-height都继承了父级，导致li的高度 = font-size ✖️ line-height ✖️ 行数；而a元素作为行内元素，它重新设置了font-size，a的高度 = font-size ✖️ line-height ✖️ 行数。
此时li的真实高度为 Math.max(li的高度, a的高度)

这篇关于javascript - 元素的高度显示异常的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！