firefox - 使用斜体时行高和实际高度之间的冲突

Question

我有以下问题：

我有一个跨度元素，行高为 18 像素，字体大小为 16 像素。当里面的文字不是斜体时，这很有效；跨度保持 18 像素高。

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

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

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

这是有问题的代码：

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

span.italicSpan
{
  font-style : italic;
}

这里有一个例子：

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

score 4 · Accepted Answer

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

score 0 · Accepted Answer

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

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

因此，解决方案是在封闭的块级元素上设置 line-height（或将 span 元素转换为显示中的块元素，如另一个元素中所建议的那样）。

score 0 · Accepted Answer

我也遇到过这个问题。我认为这与某些字体有关（例如，我在Sorts Mill Goudy上遇到过）以及它们的斜体字符相对于罗马字母的大小。行的高度取决于行内元素的“内容框”，因此较大的斜体可能会影响行的计算高度。

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

当然，现在您的斜体与正文略有不同！最后，这是否有帮助取决于您。

3 回答 3