使用斜体时行高与实际高度之间的冲突
我有以下问题：
我有一个行高为 18px、字体大小为 16px 的 span 元素。 当里面的文本不是斜体时，这非常有效；跨度仍然是 18 像素高。
当跨度内的文本为斜体或粗体时，就会出现问题。由于某种原因，span 元素的高度增加了一个像素，我得到了 19 像素高的 span。
此问题仅在 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 像素高，因为它们应该根据 line-height: 18px 保持
I have the following problem:
I have a span element with line-height 18px and font-size 16px.
This works great when the text inside is not italics; the span remains 18 pixels tall.
The problem arises when the text within the span is in italics or bold. For some reason, the height of the span element adds one pixel, and I get a 19 pixel tall span.
This problem is on firefox only. IE, Safari, Opera, and Chrome dont have this problem. The span remains 18 pixels tall no matter what.
has anybody had this problem before?
This is the offending code:
span
{
font-size : 18px ;
line-height : 18px ;
}
span.italicSpan
{
font-style : italic;
}
There is an example here:
http://edincanada.co.cc/test/shjs-0.6/test7.html
Please check the other browsers if you wish. You'll notice the span elements are kept 18 pixels tall, as they should be kept according to line-height: 18px
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您无法调整内联元素的行高。您需要将其浮动，或将其设置为
display: block或display: inline-block。You can't adjust the line-height of an inline element. You need to float it, or set it to
display: blockordisplay: inline-block.据我所知（在安装了 Firebug 的 Firefox 8 上查看示例页面），第一个 div 元素也存在这个问题。
原因是，默认情况下，div 元素从其父元素继承 line-height，而其值恰好为 19px（这取决于字体和浏览器）。在内部元素上设置行高仅意味着实际行高的下限。
因此，解决方案是在封闭的块级元素上设置行高（或者将 span 元素转换为显示中的块元素，如另一个元素中所建议的）。
As far as I can (viewing the example page on Firefox 8 with Firebug installed), the issue exists for the first div element, too.
The reason is that, by default, the div element inherits line-height from its parent, which happens to have 19px as the value (this depends on the font and on the browser). Setting line-height on an inner element just implies a lower limit on the actual line-height.
Thus, the solution is to set line-height on the enclosing block-level element (or to turn the span element to a block element in display, as suggested in another element).
我也遇到过这个问题。我认为这与某些字体有关（我已经在 Sorts Mill Goudy，例如）以及它们的斜体字符相对于罗马字母的大小如何。行的高度取决于行内元素的“内容框”它，因此较大的斜体可能会扰乱计算出的线条高度。
我发现的唯一可靠的解决方案（除了使用不同的字体）是使用斜体的垂直对齐属性。当正文文本与基线对齐时，我发现将斜体垂直对齐到行的顶部或底部可以对内容进行排序出去。
当然，现在你的斜体与正文略有不对齐！最后，这是否有帮助取决于您。
I've come across this problem too. I think it's related to certain fonts (I've had it happen with Sorts Mill Goudy, for example) and how their italic characters are sized relative to their roman letters. The height of a line depends on the "content box" of the inline elements in it, and so larger italics can mess with the computed height of the line.
The only reliable solution I've found (other than using a different font) is to play with the
vertical-alignproperty of the italics. When the body text is aligned to thebaseline, I've found that vertically aligning the italics to thetoporbottomof the line sorts things out.Of course, now your italics are subtly misaligned with respect to the body text! In the end, it's up to you as to whether this helps or not.