Question

我尝试使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中，文本下方有一些空格，使用填充，边距，行高或垂直对齐设置无法删除。 Firefox似乎正确显示了跨度。

如何删除多余的空间？三种尝试（jsfiddle，inline-block，line-height 18）

第一个答案显示了隐身方式中的相同问题。（总的利润空间要多一些，但底部的利润空间还是更多）

第二个答案：

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

Answer 1

由于默认情况下<span>不是块元素，因此添加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>

Answer 2

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

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

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

2 个答案: