html - Chrome CSS 问题，span 文本底部不可移除的空白

Question

我尝试使 span 在 Firefox 和 Chrome 浏览器之间看起来一致。Chrome 似乎总是在跨度中的文本底部添加一些额外的空格。 Firefox 没有。

我的代码:

<span style="line-height:22px; padding: 0px; margin:0px; border-radius: 3px; 
vertical-align:middle; background-color: #cc0000; color: #fff; font-size: 22px;">
100%</span>

试试https://jsfiddle.net/j904g5fn/3/

您会看到，在当前版本的 Chrome 中，文本下方有一点空间，我无法通过使用 padding、margin、line-height 或 vertical-align 设置将其删除。 Firefox 似乎确实正确显示了跨度。

如何删除多余的空间？三种尝试(jsfiddle,inline-block,line-height 18)

第一个答案在隐身方式中显示了相同的问题。 (总的边距多了一点，但底部还是多了一点)

第二个答案:

这可能是 Linux 上的 Chrome 的特定问题吗？ (v 68.0.3440.84)

Answer 1

自 <span>默认不是 block 元素，添加display:inline-block;使其发挥作用。

<span style="line-height:22px; padding: 0px; margin:0px; border-radius: 3px; vertical-align:middle; background-color: #cc0000; color: #fff; font-size: 22px; display:inline-block;">100%</span>