提问人：flatpickles 提问时间：1/26/2023 最后编辑：flatpickles 更新时间：1/26/2023 访问量：149
与其他浏览器相比，Firefox 上边界框中的文本位置更高
Text position is higher in its bounding box on Firefox vs. other browsers
问：
我已经为项目列表构建了一个布局，并且我在 Firefox 和其他浏览器之间遇到了一些线条渲染差异，特别是我的自定义字体。Firefox 将上面的文本呈现在我期望基线在行高范围内的位置。
Firefox渲染：
...而 Chrome 似乎将文本放在边界框的下方。
Chrome 渲染：
我知道Firefox和Chromium浏览器有不同的默认行高，所以我明确设置了这一点。这些线条与浏览器之间的像素高度相同（26.88 像素），但文本在其中的位置不同。
你可以看到我已将顶部填充调整得更小，这看起来像我在 Chrome 上的意图;如果我使顶部和底部填充相等，则文本在Firefox上呈现得更接近明显的垂直中心，但在Chrome中则太低。
有没有办法解决这个问题，而不做特定于浏览器的填充值？ 这是有问题的网站，这个组件的样式可以在这里找到，我的字体定义可以在这里找到。感谢您的帮助！
答：
1赞
flatpickles
1/26/2023
#1
我通过 Font Squirrel Webfont Generator 优化运行了我的字体文件，这修复了我的垂直指标！使用 Font Squirrel 编辑，我不再需要应用不同的填充值来在 Chrome 上实现垂直居中的外观。
也就是说，优化后的字体在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;
}
}
会的。如果您有更好的想法，请大喊大叫，在那之前，这就是答案！
评论