为什么内联非替换元素的计算高度在浏览器之间有所不同？

时间：2013-04-21 03:19:24

标签： html css

Content area plus leading equals inline box

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

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

  

在非替换元素中，内容区域可以是两件事之一，   CSS2.1规范允许用户代理选择哪一个。   内容区域可以是每个人的em框所描述的框   元素中的字符串在一起，或者它可以是框   由元素中的字符字形描述。

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

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

结果如下所示，span高度值由浏览器开发人员工具提供。

  • Chrome（23.0.1271.101）：15px
  • Firefox（20.0）：16px
  • Safari（6.0.3（8536.28.10））：17px

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

为什么三种浏览器之间的计算高度不同？根据规范，用户代理只能选择两种方式（em框或字符字形）。

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

1 个答案:

答案 0 :(得分：3)

  

根据规范，用户代理只能选择两种方式（em框或字符字形）。

但它也says：

  

内容区域的高度应基于字体，但此规范未指定方式。

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

相关问题
最新问题