当不期望它们行高和溢出问题时显示滚动条

Question

我正在出现一个意外的(对我而言)行为,其中显示垂直滚动条.我不明白容器高度的限制是什么.

通过更改LI的边距:1或设置UL的线高:正常而不是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

这是因为您line-height的设置为1,这意味着行高与font-size相同.这会导致字体略微溢出该行.您line-height可能已经猜到了,您需要将值设置为大于文本高度的值.该文本在技术上应该表现得如此.盒子的高度由线条的高度定义,但文字比线条略大.从可读性的角度来看,您的行高不应该等于您的字体大小.我希望这有帮助.我知道它并没有确切地告诉你高度的来源,但我相信你已经成功地探索了多种对抗方法.