Chrome中奇怪的行高答案

【问题标题】：Strange line-height in ChromeChrome中奇怪的行高
【发布时间】：2018-04-14 22:10:38
【问题描述】：

我在行高和块高度方面遇到了一个大问题，这是它的多重性。我的字体大小为 15px，行高为 1.5em (22.5px)，div 高度为：16 行 * 1.5em = 24 em。它在 Firefox 和 MS Edge 中看起来不错——正如预期的那样，div 只包含 16 行。但是在 Chrome 中实际的文本高度变得有点小了！它还以块的形式显示了第 17 行的部分。看起来很奇怪。

为什么会发生这种情况以及如何使用 CSS 解决它？

.post-preview_main__content {
  box-sizing: border-box;
  font-size: 15px;
  height: 24em;
  line-height: 1.5em;
  width: 420px;
  overflow: hidden
}

p {
  margin: 0;
  padding: 0;
}

<div class="post-preview_main__content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, necessitatibus, quidem in beatae quae quo perspiciatis nihil adipisci aut fuga ad possimus illo nisi vitae libero debitis accusantium magni esse. ipsum dolor sit amet, consectetur
    adipisicing elit. Culpa, natus, deleniti tenetur quos hic voluptate itaque nobis</p>

  <p>cum magni magnam ipsa enim a labore maxime repellendus eaque exercitationem nihil doloribus! ipsum dolor sit amet, consectetur adipisicing elit. Quidem, aliquam voluptate atque ipsa eveniet tempore sed cumque non magnam accusamus enim consectetur fuga
    fugiat ducimus dolorum temporibus dolor facilis doloribus. ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quisquam, vel dignissimos natus porro veniam velit quia odit quam dolorum reprehenderit vero eos modi non ea voluptate eligendi
    consectetur officia.</p>

  <p> cum magni magnam ipsa enim a labore maxime repellendus eaque exercitationem nihil doloribus! ipsum dolor sit amet, consectetur adipisicing elit. Quidem, aliquam voluptate atque ipsa eveniet tempore sed cumque non magnam accusamus enim consectetur fuga
    fugiat ducimus dolorum temporibus dolor facilis doloribus. ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quisquam, vel dignissimos natus porro veniam velit quia odit quam dolorum reprehenderit vero eos modi non ea voluptate eligendi
    consectetur officia.</p>

  <p>cum magni magnam ipsa enim a labore maxime repellendus eaque exercitationem nihil doloribus! ipsum dolor sit amet, consectetur adipisicing elit. Quidem, aliquam voluptate atque ipsa eveniet tempore sed cumque non magnam accusamus enim consectetur fuga
    fugiat ducimus dolorum temporibus dolor facilis doloribus. ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quisquam, vel dignissimos natus porro veniam velit quia odit quam dolorum reprehenderit vero eos modi non ea voluptate eligendi
    consectetur officia.</p>

  <p>cum magni magnam ipsa enim a labore maxime repellendus eaque exercitationem nihil doloribus! ipsum dolor sit amet, consectetur adipisicing elit. Quidem, aliquam voluptate atque ipsa eveniet tempore sed cumque non magnam accusamus enim consectetur fuga
    fugiat ducimus dolorum temporibus dolor facilis doloribus. ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quisquam, vel dignissimos natus porro veniam velit quia odit quam dolorum reprehenderit vero eos modi non ea voluptate eligendi
    consectetur officia.</p>
</div>

火狐：

铬：

【问题讨论】：

我认为没有问题。您已设置 15px 和 line-height 1.5em 并根据需要设置 line-height 22.5px。没关系，我想我也检查过 chrome :)
Div 高度是 24em 并且必须包含 24 / 1.5 - 只有 16 行，但它也包含 17th 的部分，你没看到吗？
嗯，我知道你是对的
您能否提供正确显示的浏览器屏幕截图（并突出显示另一个屏幕截图中的问题）？我暂时看不到问题...
您在 Chrome 中设置了什么缩放级别？如果不是 100%，如果将缩放级别设置为 100%，是否仍然会发生这种情况

标签： css google-chrome

【解决方案1】：

我发现问题在于 line-height 的小数值 - 22.5px (15px*1.5)，WebKit 不能正确处理这个问题，这是它的一大缺点。问题是，即使我改变 line-height 给我整数 px 值，当用户缩放页面时 font-size 改变时，我不能保持整数。

【讨论】：