Chrome span 标记中的填充不一致答案

【问题标题】：Padding inconsistancy in Chrome span tagChrome span 标记中的填充不一致
【发布时间】：2013-11-17 11:13:09
【问题描述】：

我发现 Chrome 向 span 标签添加填充的方式不一致。当使用具有小字体大小和文本的简单 span 标签时，上方和下方的填充比 Internet Explorer 中的要大。当使用大字体大小时，填充是相同的。

这可以用下面的代码/jsfiddle来测试

<span>Testing A Text</span>
<span>Testing A Text</span>

body
{    
    font-family: Helvetica,Arial,"Sans Serif";
    font-size: 10px;
}
span
{
     border: 1px solid red;   
}
span:last-child
{
    font-size: 200%;
}

（可以在这里预览：http://jsfiddle.net/gR9em/5/）

当然，这可以通过条件 CSS 或使用不同的字体来解决，但如果可能的话，这是我想避免的事情。这可能与“Arial”相关......但是，任何人都可以解释这一点并提供解决方案吗？或者这是一个已知的浏览器 CSS“错误”？

此处以图片为例：

【问题讨论】：

您指的是哪个版本的 Internet Explorer？

标签： google-chrome padding html

【解决方案1】：

我不认为这个问题与填充有关，而是与行高有关。

正确填充的示例：http://jsfiddle.net/qh3aY/1/

理想情况下，您应该在 <body> 上设置 line-height，但我想遵循 OP 标记。

IIRC，<span> 元素应始终位于另一个元素内，例如 <p>。

【讨论】：

【解决方案2】：

我在 Chrome 中再次测试了 jsFiddle，似乎文本下方的填充消失了，文本上方的填充比我发布此问题时要少。也许 Chrome 中更新了一些内容。

我猜 line-height 在理想情况下不应该在不同的浏览器之间有不同的工作方式......

【讨论】：