我有以下问题:

我有一个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

===============>>#1 票数:4

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

===============>>#2 票数:0

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

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

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

===============>>#3 票数:0

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

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

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

  ask by Edsfault translate from so

未解决问题?本站智能推荐:

关注微信公众号