优势基准在Firefox中的行为有所不同。为什么？

Question

我注意到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的示例。

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

Answer 1

我也遇到了这个。

它似乎是一个 known bug in FireFox，但已得到修复（据我所知，在 v82 2020 年 8 月期间）。

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

Html code in Stackblitz

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