多列布局中文本行的垂直节奏

Question

我需要一个多列布局，但是当我尝试创建它并用虚拟文本填充它时，我可以看到文本行的对齐方式略有不同。

我用 flexbox div 和两列 <table> 对其进行了测试，但结果是一样的。我还在 Chrome 和 Firefox 上进行了测试。

绿线显示相同（很好）的垂直位置，而红线显示不成比例。

（为了测试目的，调整了浏览器窗口的大小，宽度约为 670 像素）

-Fiddle with flexbox

-Fiddle with table

<style>
body {
  display: flex;
}
div {
  flex: 1;
  margin: 10px;
}
div:last-of-type {
  flex: 2;
}
</style>

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

这也可能只是渲染引擎的错误，但我不确定。也许，它可以通过 CSS 以某种方式修复。

我还尝试指定精确的字体大小和行高，如下所示：

p {
  font-size: 16px;
  line-height: 110%;
}

但这并不能解决问题。

Answer 1

问题是p的边距是1em。因此，如果您在行高为 110% (1.1em) 的文本中有分节符，则行间距为 2.1em，而不是两行正常占用的 2.2em。

解决方法：将边距设置为与行高相同的值。

p {
  /* font-size: doesn't matter */
  line-height: 110%;
  margin: 1.1em 0; /* same as line-height */
}

编辑：
浏览器似乎以不同的方式显示行高。如果 line-height 不是整数个像素，Chrome 会对该值进行四舍五入并使用该值。 Firefox 显然会记住分数并在计算下一个分数时使用它。因此，如果该值为 17.4 像素，Firefox 将 17 像素用于前两行，18 像素用于下一行。 IE11 也能做到这一点。
示例见this fiddle（使用 2.4 像素）。

我不确定是否有解决方案，除了将 line-height 设置为特定数量的像素，而不是字体大小的百分比。

p {
  /* font-size: now does matter, sorry */
  line-height: 18px; /* or anything appropriate */
  margin: 18px 0; /* same as line height */
}