与其他浏览器相比，文本 position 在 Firefox 上的边界框更高

Question

我已经为项目列表构建了一个布局，但我在 Firefox 和其他浏览器之间遇到了一些线条渲染差异，特别是我的自定义字体。 Firefox 在我希望基线在行高范围内的位置呈现上方的文本。

Firefox 效果图：

... 而 Chrome 似乎将文本放在边界框中较低的位置。

铬渲染：

我知道 Firefox 和 Chromium 浏览器有不同的默认行高，所以我明确地设置了它。 线条与浏览器之间的像素高度相同 (26.88px)，但文本在其中的位置不同。

你可以看到我已经将顶部填充调整得更小，这看起来是我在 Chrome 上的意图； 如果我使顶部和底部填充相等，则文本呈现更接近 Firefox 上明显的垂直中心，但在 Chrome 中落得太低。

有没有办法解决这个问题，而不用做特定于浏览器的填充值？ 这是有问题的站点，可以在此处找到该组件的样式，并且可以在此处找到我的字体定义。 谢谢你的帮助！

Answer 1

我通过 Font Squirrel Webfont Generator优化运行我的字体文件，这修复了我的垂直指标，使用 Font Squirrel 编辑。 我不再需要应用不同的填充值来在 Chrome 上实现垂直居中的外观。

也就是说，优化后的 fonts仍然在 Firefox 的行高内渲染得更高。即使我使用默认字体而不是自定义字体也是如此：

我认为这意味着 Firefox 只是古怪的，必须相应地进行特殊处理。 这是我的 CSS，它在 Chrome 和 Firefox 中的外观大致相同：

.project-row {
    padding: 0.7em;
}

/* appear vertically centered in Firefox */
@supports (-moz-appearance: none) {
    .project-row {
        padding-top: 0.75em;
        padding-bottom: 0.65em;
    }
}

它会做的。 如果您有任何更好的想法，请大声疾呼，直到那时，这就是答案！