Chrome与Firefox浏览器自定义tooltip行高不一致如何解决？

这个差异是Firefox对<br>标签的行高计算逻辑与Chrome不统一导致的：

• Chrome会将<br>标签与相邻文本的行高绑定计算，不会单独生成额外高度
• Firefox会把单独的<br>标签作为独立匿名行盒计算行高，你设置的百分比行高120%是基于父元素字号计算的固定像素值，当<br>和内部加粗的<b>标签混合排布时，行高计算出现偏差，就产生了你观测到的19.6px异常换行高度。

方案1：修改行高为无单位数值（成本最低，无需改HTML） #

将你现有CSS中的line-height: 120% !important;替换为无单位的比例值：

#tooltip {
    /* 其余原有属性不变 */
    line-height: 1.2 !important;
}

无单位行高会让所有子元素（包括<br>）统一继承比例值，而非父元素计算后的固定像素值，可解决大部分Firefox行高计算偏差问题。

方案2：强制重置<br>标签行高 #

如果方案1仍未解决，可以单独给tooltip内的<br>设置行高，覆盖Firefox的默认计算逻辑：

#tooltip br {
    line-height: 100% !important;
}

方案3：替换<br>为块级元素换行（最稳妥，无兼容性问题） #

直接废弃<br>做换行的写法，将每一行内容用<div>等块级标签包裹，从根源上规避<br>的跨浏览器计算差异。
修改后的HTML结构参考：

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

这个方案可以保证Chrome和Firefox的渲染效果100%一致，也更符合语义化规范。

内容的提问来源于stack exchange，提问作者Cyber