html - 滚动条出现在不期望它们的行高和溢出问题时

Question

我遇到了一个意想不到的（对我来说）出现垂直滚动条的行为。我不明白对容器高度的限制可能是什么。

我可以通过更改 LI 的 margin:1 或设置 UL 的 lineheight: normal 而不是 1 来解决这个问题。

谁能解释实际发生的事情？也就是说我超过了需要垂直滚动条的高度？

我创建了一个非常简单的JSFIDDLE来说明我遇到的问题。

HTML 代码：

<div class="content-section" >
  <ul >
    <li>cheese</li>
    <li>crackers</li>
  </ul>
</div>

CSS 代码：

body {
 line-height: 1;
}

ul {
    margin: 0;
}

.content-section {
        overflow-y: auto; 
}

Answer 1

这是因为 yourline-height设置为 1，这意味着 line-height 与 font-size 相同。这会导致字体稍微溢出行。正如您可能已经猜到的那样，您需要设置line-height一个大于文本高度的值。文本在技术上表现得应有尽有。框的高度由线条的高度定义，但文本比线条略大。从可读性的角度来看，你的 line-height 永远不应该等于你的 font-size。我希望这有帮助。我知道它并不能准确地告诉你高度来自哪里，但我相信你已经成功地探索了多种对抗它的方法。

Answer 2

我不确定为什么需要将溢出设置为自动，如果将其删除，则问题解决

如果 content-section 需要有一定的高度，则设置高度，需要的时候会出现滚动条（如果需要溢出）

http://jsfiddle.net/pGuHG/2/

.content-section {
    overflow-y: auto;
    height: 100px;
}

Answer 3

我也有这个问题。我有一个场景需要设置 max-height 并且在跨越高度时需要滚动，所以我需要设置overflow:auto，但是当不跨越高度时，滚动也会出现。

我将行高调整为更大，滚动消失了。