Chrome中的线条高度奇怪

Question

我遇到了线高和块高的大问题，这是它的多重性。我的字体大小为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>

火狐：

铬：

Answer 1

我发现问题是行高的小数值 - 22.5px（15px * 1.5），WebKit没有处理这个问题，这是它的一个很大的缺点。 问题是即使我改变行高以给出整数px值，我也不能保持整数，而当用户缩放页面时字体大小会发生变化。