Chrome CSS问题，跨度文本底部的不可移动空格答案

【问题标题】：Chrome CSS issue, non-removable whitespace at the bottom of text in spanChrome CSS问题，跨度文本底部的不可移动空格
【发布时间】：2018-08-09 16:14:28
【问题描述】：

我尝试让 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)

【问题讨论】：

适用于我的 Chrome (Win 7 x64)。您是否尝试过将 Chrome 用作“隐身”？你可能有一些扩展搞砸了。
我只是尝试了隐身模式，它没有任何区别。感谢您的建议
你能显示截图吗？我也无法在 Chrome 上重现。
我加了一张 span 本身的小图
<span> 不是块元素。给它一个 display: inline-block; 以使某些语句起作用。

标签： html css

【解决方案1】：

由于<span>默认不是块元素，添加display:inline-block;使其生效。

&lt;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;"&gt;100%&lt;/span&gt;

【讨论】：

【解决方案2】：

问题是你需要将元素定义为一种块类型（如inline-block）来接受边距和填充，以及行高与字体大小相同，这增加了一些额外的基于字体的字形渲染的间距。通过将 line-height 设置为 0.75，您指定了一个无单位值，允许它根据字体大小放大和缩小，而不会影响框中文本的间距。

&lt;span style="display:inline-block; line-height:0.75; border-radius: 3px; background-color: #cc0000; color: #fff; font-size: 28px;"&gt;100%&lt;/span&gt;

【讨论】：

为了跟进我的回答和您引用它的编辑 OP，以下是我在 Windows 和 Mac 上的 Chrome 上的外观。这可能是与 Linux 相关的问题。 imgur.com/eXdwww9
我想是的。在我同事的 Mac 上，跨度在 Chrome 中看起来不错。