Question

我试图在我正在处理的页面上找到所有不一致的scrollHeight / offsetHeight，但偶然发现了这一点。有些元素的scrollHeight / offsetHeight之间相差1px。我能够将问题缩小到这个范围。

html：

<div>Text</div>

css：

div {
  font-size: 17px
  overflow: auto
}

当我们更改字体大小时，有时会出现少量1px滚动。谁能解释为什么会这样？我在div中只有一行。为什么它不能正确拉伸div的高度？我可以以某种方式避免它吗？这很烦人。

我只在Linux上的Chrome和Firefox中尝试过。

Answer 1

结合line-height，这似乎是一个overflow: auto问题。

这是您的Codepen的副本。唯一的不同是，我设置了默认的line-height: 1（如果您检查了Codepen中的div，则可以看到div默认继承了line-height: 1）：< / p>

div {
  font-size: 17px;
  overflow: auto;

  /* default line-height */
  line-height: 1;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget interdum urna, eget tristique tellus. Phasellus pharetra blandit nisl, non venenatis arcu efficitur nec. Nulla facilisi. Ut at ante quis risus posuere varius. Aenean fringilla dui non sem hendrerit volutpat. Pellentesque mattis libero at volutpat malesuada. Aliquam in lobortis orci, vel condimentum tellus. Ut dignissim ligula sed nulla blandit vestibulum. Cras eleifend, orci eget rhoncus faucibus, massa lacus accumsan mauris, eget efficitur mauris est non nisl. Morbi vel nulla a urna pretium varius.
</div>

如果您为17像素的文本设置了适当的line-height，则不会出现滚动问题。例如：

div {
  font-size: 17px;
  overflow: auto;
  line-height: 20px;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget interdum urna, eget tristique tellus. Phasellus pharetra blandit nisl, non venenatis arcu efficitur nec. Nulla facilisi. Ut at ante quis risus posuere varius. Aenean fringilla dui non sem hendrerit volutpat. Pellentesque mattis libero at volutpat malesuada. Aliquam in lobortis orci, vel condimentum tellus. Ut dignissim ligula sed nulla blandit vestibulum. Cras eleifend, orci eget rhoncus faucibus, massa lacus accumsan mauris, eget efficitur mauris est non nisl. Morbi vel nulla a urna pretium varius.
</div>

基本上，如果line-height小于或等于font-size，并且overflow设置为auto，则会出现滚动问题。如果overflow属性被删除，并且line-height仍然小于或等于font-size，则滚动问题就消失了。

根据MDN，这正是overflow: auto的作用：

自动取决于用户代理。如果内容适合填充框，则外观与可见框相同，但仍会建立新的块格式上下文。如果内容溢出，桌面浏览器会提供滚动条。

基本上设置了此overflow属性，当line-height裁剪字体时，您将获得滚动条。

一些字体大小使单行文本意外滚动

1 个答案: