3

内容区域加前导等于行内框

根据上图（来自《CSS The Definitive Guide 3rd Edition》），计算出的内联框高度等于内容区域加上前导，如果我们不指定line-height，则高度仅由内容区域决定.

再次根据“CSS The Definitive Guide 3rd Edition”，用户代理可以选择以下两种方式之一来计算内容区域高度：

在不可替换元素中，内容区域可以是两种事物之一，CSS2.1 规范允许用户代理选择哪一种。内容区可以是元素中每个字符的em box串在一起所描述的box，也可以是元素中的字符glyphs所描述的box。

我使用一个简单的页面来测试浏览器之间的内联元素高度计算：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        span {
            font-size: 15px;
        }
    </style>
</head>
<body>
    <span>MERLIN</span>
</body>
</html>

结果如下所示，span高度值由浏览器开发者工具给出。

  • 铬（23.0.1271.101）：15 像素
  • 火狐（20.0）：16像素
  • Safari（6.0.3（8536.28.10））：17px

（line-height明确指定到 15px 仍然会导致相同的结果）

为什么所有三种浏览器的计算高度都不同？根据规范，用户代理只有两种方式可以选择表单（em box 或 character glyph）。

这是否意味着我无法控制内联非替换元素的高度？

4

1 回答 1

3

根据规范，用户代理只有两种方式可以选择表单（em box 或 character glyph）。

但它也说：

内容区域的高度应该基于字体，但是这个规范没有具体说明如何。

因此，仍然没有 100% 明确定义应该如何计算高度。请注意，不同的浏览器有不同的字体渲染算法，这也可能会影响这些计算。

于 2013-04-21T03:22:45.513 回答