Firefox 使用斜体时线条高度和实际高度之间的冲突

我有以下问题：

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

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

此问题仅在firefox上存在。例如，Safari、Opera和Chrome没有这个问题。不管怎样，跨度仍然保持18像素高

以前有人有过这个问题吗

这就是违规代码：

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

span.italicSpan
{
  font-style : italic;
}

这里有一个例子：

---

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

您不能调整内联元素的行高。您需要将其浮动，或将其设置为

display:block

或

display:inline block

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

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

---

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

我也遇到了这个问题。我认为这与某些字体（例如，我曾经遇到过这种情况）以及斜体字符相对于罗马字母的大小有关。行的高度取决于其中内联元素的“”，因此较大的斜体可能会干扰行的计算高度

我找到的唯一可靠的解决方案（除了使用不同的字体）是使用斜体的

vertical align

属性。当正文文本与

基线

对齐时，我发现将斜体与行的

顶部

或

底部

垂直对齐可以解决问题

---

当然，现在您的斜体字与正文文本有细微的错位！最后，这是否有帮助取决于您。

webkit也有同样的问题。这看起来很有趣，接得好。我可以在webkit上确认这一点。假设我的问题与OPs相同：这并不能解决我的问题。我的问题与此类似——添加字体样式：斜体在计算的高度上添加1px，尽管行高（在块级祖先上正确指定）远远大于字体大小。仅在Windows上显示，但在所有浏览器中都会显示。@AdamA如果元素本身被直接指定为

display:block

，或者如果声明了显式的

height

，则计算出的高度是否相同（带/不带斜体）？抱歉，我响应太晚了。我希望一个明确的高度可以解决这个问题——只有计算出来的高度是奇怪的。这尤其令人惊讶，因为您可以将行高度设置为比文本大得多，以至于您不希望文本的大小对元素的高度产生任何影响。但是，添加斜体还是会增加一个像素的高度。