Chrome 和 Firefox 之间的行高不一致

Question

我正在为我的网站制作自定义工具提示，我希望它们在 Chrome 和 Firefox 上看起来一样。一切都按预期工作，除了工具提示的每一行在 Firefox 上似乎有不同的高度，尽管我定义了 line-height 并添加了 !important.

我设置了一些 JS 来设置文本并将工具提示移动到光标的位置，但我怀疑这是导致行高问题的原因。

这是CSS：

#tooltip {
    position: fixed;
    padding: 5px 10px;
    font-size: 14px;
    color: <?= $theme['fgTooltip'] ?>;
    line-height: 120% !important;
    background: <?= $theme['bgTooltip'] ?>;
    border-radius: 6px;
    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.3);
    user-select: none;
    transition: 0.1s ease-in-out;
    z-index: 100;
}

和生成的HTML:

<div id="tooltip" style="display: block; opacity: 1; left: 265px; top: 644px;">
    <b>Test.md</b>
    <br>Last modified: 9/26/2021 2:09 AM
    <br>File type: Markdown Document
    <br>File size: 146 Bytes
</div>

The result in Chrome

The result in Firefox

知道为什么会这样吗？这只是 Firefox 的一个奇怪的事情吗？

感谢所有回复！

编辑：
在 Firefox 的 DevTools 中查看渲染结果后，我发现每行文本高 19px，但换行符高 19.6px。这也解释了为什么我的示例工具提示（和单行工具提示）的最后一行没有这个问题。我该如何解决这个问题？

Answer 1

事实证明，出于某种原因，Firefox 中的 <br> 元素不想正确遵守其父元素的行高。

我通过将所有 <br> 元素的 line-height 设置为 0% 来解决这个问题。

Chrome 和 Firefox 之间的行高不一致

Inconsistent line height between Chrome and Firefox

css

firefox

google-chrome