使用斜体时线高与实际高度之间的冲突

Question

我有以下问题：

我有一个span元素，行高18px，字体大小16px。 当里面的文字不是斜体时，这很有效; 跨度仍然是18像素高。

当跨度内的文本以斜体或粗体显示时，会出现问题。 由于某种原因，span元素的高度增加了一个像素，我获得了19像素的高跨度。

这个问题仅在firefox上。 IE，Safari，Opera和Chrome没有这个问题。 无论如何，跨度仍保持18像素高。

以前有人有过这个问题吗？

这是违规的代码：

span
{
  font-size : 18px ;
  line-height : 18px ;
}

span.italicSpan
{
  font-style : italic;
}

这里有一个例子：

http://edincanada.co.cc/test/shjs-0.6/test7.html

如果您愿意，请检查其他浏览器。 您会注意到span元素保持18像素高，因为它们应该根据行高保持：18px

Answer 1

您无法调整内联元素的行高。 您需要浮动它，或将其设置为display: block或display: inline-block 。

Answer 2

我也遇到过这个问题。 我认为这与某些字体有关（例如，我曾在Sorts Mill Goudy中发生过这种情况）以及它们的斜体字符相对于罗马字母的大小。 线条的高度取决于其中内嵌元素的“ 内容框 ”，因此较大的斜体可能会弄乱线的计算高度。

我发现的唯一可靠的解决方案（除了使用不同的字体）是使用斜体的vertical-align属性。 当正文文本与baseline对齐时，我发现将斜体垂直对齐到线条的top或bottom可以对其进行排序。

当然，现在你的斜体在正文上有微妙的错位！ 最后，由您来决定这是否有帮助。

Answer 3

尽我所能（在安装了Firebug的Firefox 8上查看示例页面），第一个div元素也存在问题。

原因是，默认情况下，div元素从其父级继承行高，恰好有19px作为值（这取决于字体和浏览器）。 在内部元素上设置行高仅意味着实际行高的下限。

因此，解决方案是在封闭的块级元素上设置行高（或者将span元素转换为显示中的块元素，如另一个元素中所示）。