作者：钱宝坤

标准参考

关于 Line Height （行高）计算说明，请参照 W3C CSS 2.1 规范 10.8 节： http://www.w3.org/TR/CSS21/visudet.html#line-height

关于 Leading and half-leading （差异半差异） 说明，请参照 W3C CSS 2.1 规范 10.8.1 节： http://www.w3.org/TR/CSS21/visudet.html#leading

关于 Inline formatting context （行内格式化上下文）说明，请参照 W3C CSS 2.1 规范 9.4.2 节： http://www.w3.org/TR/CSS21/visuren.html#inline-formatting

问题描述

Webkit 浏览器下行框高度计算还依赖于 'font-size' 属性值，在 'line-height' 属性值明显小于 'font-size' 属性值设置时，将导致实际计算出的行框高度大于其他浏览器。

造成的影响

在父容器 ‘height’ 值设置为 'auto' 时，父容器高度由其内容高度决定；内容高度又由行框高度计算值决定。 Webkit 浏览器中行框高度计算失误将导致父容器实际高度计算有误。

受影响的浏览器

Chrome Safari

问题分析

根据规范相应描述，行框高度计算过程大致如下：

• 根据 'line-height' 属性计算出每个行内元素的行内框高度；
• 根据 'vertical-align' 属性计算出每个行内框的垂直对齐方式；
• 行框的高度是垂直对齐排列最上面框的定边和最下边框的底边距离；
• 如果行内框字号设置大于行内框的 'line-height' 设置，文字将溢出当前行框，他可能造成多行时文字相互覆盖；
• 每个计算出的行框在垂直高度上排列没有间隙；
• 在没有其他块级内容的情况下，整个容器的高度取决于多个行框累计的高度。

实际中，由于 line-box 不可视，这将使得我们无法直观的看到 line-box 的计算高度。本例中，我们将使用一些 "技巧" 使 line-box 可视化，并可测量，大致思路为：

• 在一宽度足够大的容器内使用单一行内非替换元素，为其设置 'line-height' 属性，使行内元素产生指定高度的行内框；
• 在单一行内非替元素情况下，容器内行框高度计算会与此单一行内框高度一致；
• 容器在 'height' 值为初始的 'auto' 和 'padding:0' 设定的情况下，高度值会等于内部单一含行框高度；
• 为容器添加背景色，此时背景的范围会与行框高度恰好一致。

根据以上思路编写如下代码，其中 P 标记为容器块，'padding' 属性被这设置为 0； SPAN 标记为行内非替换元素，他将继承容器 P 标记内设置的 ‘line-height’ 和 'font-size' 设定，同时统一字体为 ’simsun‘ 避免出现字体导致高度计算的差异：

<h1>第一组</h1> <p style="padding: 0; line-height: 10px; font-size: 30px;
                background:silver; font-family:simsun; "> <span>p[1]: line-height: 10px; font-size:
                30px;</span> </p> <p style="padding: 0; line-height: 5px; font-size: 30px;
                background:silver; font-family:simsun; "> <span >p[2]: line-height: 5px; font-size:
                30px;</span> </p> <p style="padding: 0; line-height: 0px; font-size: 30px;
                background:silver; font-family:simsun; "> <span >p[3]: line-height: 0px; font-size:
                30px;</span> </p> <h1>第二组</h1> <p style="padding: 0; line-height: 10px;
                font-size: 12px; background:silver; font-family:simsun; "> <span>p[4]: line-height: 10px;
                font-size: 12px;</span> </p> <p style="padding: 0; line-height: 5px; font-size:
                12px; background:silver; font-family:simsun; "> <span>p[5]: line-height: 5px; font-size:
                12px;</span> </p> <p style="padding: 0; line-height: 0px; font-size: 12px;
                background:silver; font-family:simsun; "> <span>p[6]: line-height: 0px; font-size:
                12px;</span> </p> <h1>第三组</h1> <p style="padding: 0; line-height: 4px;
                font-size: 5px; background:silver; font-family:simsun; "> <span>p[7]: line-height: 4px;
                font-size: 5px;</span> </p> <p style="padding: 0; line-height: 2px; font-size: 5px;
                background:silver; font-family:simsun; "> <span>p[8]: line-height: 2px; font-size:
                5px;</span> </p> <p style="padding: 0; line-height: 0px; font-size: 5px;
                background:silver; font-family:simsun; "> <span>p[9]: line-height: 0px; font-size:
                5px;</span> </p>

代码中 P 元素的背景色高度范围恰好表示为 line-box 行高的高度，这里一共有 9 个 P 标记代表不同的行高设置情况，其中每三个一组代表不同的 'font-size' 设置情况。三组中均保证 ‘font-size’ 值比 'line-height' 值高，使文本内容可以溢出 line-box 高度。

观察实际效果：

	IE6 IE7 IE8 Firefox Opera
第一组
第二组
第三组
Safari
第一组
第二组
第三组
Chrome
第一组
第二组
第三组

对照上表，灰色区域等同于 line-box 的实际高度，在 IE6 IE7 IE8 Firefox Opera 浏览器中行 line-box 的高度计算与 'font-size' 设置值无关，进跟其中唯一行内非替换元素 SPAN 的行内框高度有关，此时 'line-height' 值等于 line-box 的计算高度，'line-height' 值缩小直接导致 line-box 计算高度同等变小，这是符合规范描述的计算方法。

但是在 Safari Chrome 中， line-box 的计算高度还依赖于 'font-size' 值，随着 ‘line-height’值逐步缩小，其变化规律是非线性的，无明显规律可寻。

截图测量每个 line-box 高度如下表：

	IE6 IE7 IE8 Firefox Opera	Safari	Chrome
第一组	p [1] line-box 测量值为 10px p [2] line-box 测量值为 5px p [3] line-box 测量值为 0px	p [1] line-box 测量值为 16px p [2] line-box 测量值为 14px p [3] line-box 测量值为 11px	p [1] line-box 测量值为 16px p [2] line-box 测量值为 14px p [3] line-box 测量值为 11px
第二组	p [4] line-box 测量值为 10px p [5] line-box 测量值为 5px p [6] line-box 测量值为 0px	p [4] line-box 测量值为 10px p [5] line-box 测量值为 7px p [6] line-box 测量值为 4px	p [4] line-box 测量值为 10px p [5] line-box 测量值为 7px p [6] line-box 测量值为 4px
第三组	p [7] line-box 测量值为 4px p [8] line-box 测量值为 2px p [9] line-box 测量值为 0px	p [7] line-box 测量值为 4px p [8] line-box 测量值为 3px p [9] line-box 测量值为 2px	p [7] line-box 测量值为 6px p [8] line-box 测量值为 5px p [9] line-box 测量值为 4px

表中明确表示出本例情况，在相同 'line-height' 设置时，Safari Chrome 对 line-box 的计算高度会较其他浏览器大。

在字号小于 12px 后，由于 Chrome 中文版自身存在 12px 字号渲染 Bug ，其小于 12px 的字号均用 12px 渲染；这导致之后 line-box 的计算高度又与 Safari 浏览器不同。

总之，当某个行内块的 'font-size' 值设置大于实际 line-box 计算高度时，使用 Safari Chrome 将得到与规范算法相比较大的 line-box 计算高度，从而导致包含 line-box 的容器高度计算错误。

解决方案

为了取得正常布局，建议 'line-height' 计算值永远大于 'font-size' 计算值设置。

参见

知识库

• ...

相关问题

• BW5006: Chrome 中文版配置文件中对最小字体限制为 12px