为什么计算的内联非重置元素的高度在浏览器之间不同？ [英] Why the computed height of inline nonreplaced element differs between browsers?
问题描述
根据上图（来自CSS The Definitive Guide 3rd Edition），如果没有指定 line-height <>，则计算的内联框的高度等于内容区域加上前导。 / code>，高度只会根据内容区域确定。
According to the figure above(come from "CSS The Definitive Guide 3rd Edition"), the computed height of an inline box is equals to content area plus leading, if we didn't specify line-height, than the height will only determine by the content area.
再次根据CSS第三版正式指南，用户代理可以选择一个两种方法来计算内容区域的高度：
Again according to "CSS The Definitive Guide 3rd Edition", user agent may choose one of the two ways to caculate the content area height:
在非替换元素中，内容区域可以是两个东西之一：
和CSS2.1规范允许用户代理选择哪一个。
内容区域可以是由框中的每个
字符的em框描述的框，可以是元素中字符字形描述的框
。 p>
In nonreplaced elements, the content area can be one of two things, and the CSS2.1 specification allows user agents to choose which one. The content area can be the box described by the em boxes of every character in the element strung together, or it can be the box described by the character glyphs in the element.
我使用一个简单的页面来测试浏览器之间的内联元素高度计算：
I use a simple page to test the inline element height caculation between browsers:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span {
font-size: 15px;
}
</style>
</head>
<body>
<span>MERLIN</span>
</body>
</html>
结果如下， span
And the result is listed below, the span height value is given by the browser developer tool.
- Chrome（23.0.1271.101）：15px li> Firefox（20.0）：16px
- Safari（6.0.3（8536.28.10））：17px
- Chrome(23.0.1271.101): 15px
- Firefox(20.0): 16px
- Safari(6.0.3(8536.28.10)): 17px
（明确指定 line-height 到15px仍然导致相同的结果）
(Specify the line-height to 15px explicitly is still lead to the same result)
为什么计算的高度在所有三个浏览器之间不同？根据规范，用户代理只有两种方式可以选择形式（em框或字符glyph）。
Why the computed heights are different between all three browsers? according to the specification, there are only two ways a user agent can choose form(em box or character glyph).
这意味着没有办法我可以控制根据规范，内联非置换元素的高度
Does this means there is no way i can control the height of an inline nonreplaced element?
推荐答案
用户代理可以选择形式（em框或字符字形）。
according to the specification, there are only two ways a user agent can choose form(em box or character glyph).
但它也说：
内容区域的高度应该基于字体，但是此规范不指定如何。
The height of the content area should be based on the font, but this specification does not specify how.
100％清楚地定义了如何计算高度。请注意，不同的浏览器有不同的字体渲染算法，这也可能影响这些计算。
So it's still not 100% clearly defined how the height should be calculated. Note that different browsers have different font rendering algorithms, which may also affect these calculations.
这篇关于为什么计算的内联非重置元素的高度在浏览器之间不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
