在 Firefox 中，dominant-baseline 的行为有所不同。为什么？答案

【问题标题】：dominant-baseline behaves differently in Firefox. Why?在 Firefox 中，dominant-baseline 的行为有所不同。为什么？
【发布时间】：2020-01-21 12:18:15
【问题描述】：

我注意到 SVG 属性 dominant-baseline 在 Chrome 和 Firefox 中的行为不同。

dominant-baseline="hanging" 的垂直对齐方式并不完全相同。在 Firefox 中，path 和 text 之间的差距比 Chrome 中的稍大。

In Chrome 76.0.3809.132

In Firefox 69.0.1

我已经阅读了dominant-baseline doesn't work in Firefox，但它似乎不适用于这里，因为该属性直接位于<text> 元素上。

<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
    <path d="M20,20 L180,20" stroke="grey" />
    <text dominant-baseline="hanging" x="30" y="20">Hanging</text>
</svg>

示例取自https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline。

我希望不同浏览器的垂直对齐方式相同，但事实并非如此。知道为什么吗？

【问题讨论】：

请看Browser Compatibility
你是说Hanging的差距稍大？
所有兼容性未知 :(
@RobertLongson 是的
@RobertLongson 接受dominant-baseline="hanging" 在不同浏览器中的行为略有不同，您知道是否有可预测的方法来预测像素间隙？比如为 Firefox 添加一个特定的 dx 以复制 Chrome 中的行为。

标签： css svg vertical-alignment

【解决方案1】：

我也遇到过。

它似乎是 known bug in FireFox，但已修复（据我所知，在 v82 Aug-2020 中）。

所以它在最新的 FireFox (87.0) 中看起来不错：

Html code in Stackblitz

我遇到它是因为一些测试自动化工具（例如 Percy）仍在使用旧的 firefox 版本。

【讨论】：