css - 添加line-height之后为什么父元素会出现一个滚动条？

问题描述

问 题

在写下图这个页面。为了让右上角的红色数字 3.2 (字号55px) 与左边那个banner图下沿对齐，我先给数字所在的<p>,也就是代码中的 .about_footer_1 加了个 line-height: 38px;。（否则数字 3.2 下边会有一点空白）
奇怪的是加了之后，.about 出现了一个滚动条…… 我已经给 .about 设置了 overflow:auto 了，这个滚动条是哪来的呢？
代码地址：
http://codepen.io/zhang3pang/pen/NNjYPQ

解决方案

不知道题主是不是改过 demo，我在里面看到了横向和纵向的滚动条。
横向的是因为 700 那个数字的宽度太大导致的。
纵向的原因并不复杂，但是看起来挺绕。首先 overflow:auto 并不是不出现滚动条的意思，你 demo 中的这个应该是用来清浮动让父元素高度不塌陷的。那个 3.2 的确是 float 的，父元素也没塌陷，问题在于你设置的 line-height 是不足够显示下那么大的 font-size 的，意味着内容的高度是超过父元素高度的，加之又是 overflow：auto，于是乎出现了纵向滚动条。可以尝试把 font-size 缩小或者 line-height 增大，即可看见滚动条消失。
不过，demo 里的实现方式其实写的不是特别好 =.=

这篇关于css - 添加line-height之后为什么父元素会出现一个滚动条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！