无法调整垂直间距以捕捉到基线网格答案

【问题标题】：Cannot adjust vertical spacing for snapping to baseline grid无法调整垂直间距以捕捉到基线网格
【发布时间】：2016-11-30 18:59:49
【问题描述】：

a demo page 有两个块级元素，即h1 和h2。我尝试以跨浏览器的方式将所有基线准确地放在网格上，但第二个标题失败了。

对于h1，我对margin-top进行了实验，发现它的值可以设置在1.5px和1.85px之间——然后标题会在所有浏览器中对齐基线。

但试图为h2 的margin-top 找到类似的范围，我遇到了僵局。在大多数浏览器（例如 Chrome 或 Safari）中，适当的范围是 4px 到 4.99px。但在 Windows 上的 Firefox 中（并且仅在 Windows 上）它是 3px 到 3.99px。因此，可能的边距值没有相交的子范围。如果标题在一个浏览器中被完美捕捉，那么它在另一个浏览器中会错失 1 个像素。

您能提出任何解决方案吗？

【问题讨论】：

试试这个：drewish.com/tools/vertical-rhythm
@Toby，这种方法理论上很好，但实际上它会导致在不同浏览器中出现相同的 ±1 像素散布。

标签： css cross-browser spacing typography baseline

【解决方案1】：

我发现 Mac 上的 Firefox 与 Windows 上的行为方式相同，但在 Linux 上它对间距的处理方式不同。所以在找到跨浏览器解决方案之前，恐怕我不得不使用 CSS hacks 来专门针对 Windows 和 Mac 上的 Firefox：

@media screen and (-moz-windows-theme) {
  … CSS for Windows goes here …
}

@supports(-moz-osx-font-smoothing:auto) {
  … CSS for Mac goes here …
}

【讨论】：