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

Question

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

对于h1，我尝试了margin-top并发现其值可以在1.5px和1.85px之间设置 - 然后标题会在所有浏览器中与基线对齐

但是试图找到margin-top h2的类似范围，我陷入了僵局。在大多数浏览器（例如Chrome或Safari）中，相应的范围为4px到4.99px。但是在Windows上的Firefox中（仅在Windows上）它是3px到3.99px。因此，对于可能的保证金值，没有相交的子范围。如果标题在一个浏览器中完全捕捉，则它在另一个浏览器中错过了1个像素。

你能建议任何解决方案吗？

Answer 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 …
}