【发布时间】：2012-03-25 10:31:06
【问题描述】：
我无法弄清楚为什么在某些浏览器中内联元素会忽略 line-height（Chrome 和 Firefox 会忽略它，但 IE9 不会）。
这是一个例子：
<small style="line-height: 1; font-size: 26px;">Hello, World</small>
预期的结果是元素高度为 26 像素，但是，它被设置为 31 像素。如果我将元素的显示设置为阻塞，则高度正确设置为 26px。
我读到的所有内容都说它应该设置为行高，所以我无法弄清楚这一点。这是我在 W3C 上读到的内容：
计算line box中每个inline-level box的高度。对于替换元素、inline-block 元素和 inline-table 元素，这是它们的边距框的高度； 对于内联框，这是它们的“行高”。
【问题讨论】：
-
快速测试表明，在 Firefox 中跨度确实有一个 26px 的计算
line-height。你是怎么测试的？ -
我找不到办法让它不起作用...jsfiddle.net/RnDDQ
-
我添加了一个 1px 的边框来显示元素的物理尺寸。然后我打开 Photoshop 并测量像素。 Firefox 和 Chrome 显示适当的行高，但元素的高度更大。在 Chrome 中，您不需要边框......只需使用开发工具来突出显示元素。
-
@animuson 在您的 jsfiddle 示例中，Chrome 将小尺寸的高度显示为 29px，而不是 26px。
-
这是从 2000 年开始的，但仍然非常有趣...... David Baron 对内联高度和行高的解释：dbaron.org/css/2000/01/dibm-20000113