Firefox 和 Chrome 中的 CSS 行高不一样

Posted 2023-03-06

【中文标题】Firefox 和 Chrome 中的 CSS 行高不一样

【英文标题】：CSS line-height not the same in Firefox and Chrome

【发布时间】：2015-10-01 21:22:54

【问题描述】：

目标：仅在文本框中显示前四行。

我用 Chrome 43.0.2357.132（64 位）和 Firefox 39 测试了 JSFiddle Demo，在 Chrome 中，文本框完美显示了前 4 行（其余行被隐藏），而在 Firefox 中，line-height 显得更大，因此第四行被剪掉了。

如何用 CSS 解决这个问题？

.txt 
    width:300px;
    height:48px;
    overflow:hidden;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#aaaaaa;
    margin-bottom:2em;
    font-size:0.8em;

<div class="txt">
    This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. 
</div>

【问题讨论】：

所有浏览器的默认字体大小都一样吗？您在px 中设置了高度，但在em 中设置了字体大小。您可能希望将 line-height 声明为（使其覆盖任何默认值，如果给定）。

【参考方案1】：

您可以使用以下方法为 Mozilla 添加行高代码：

 @-moz-document url-prefix() 
    *,body
        line-height: as per your requirement;
    
    

【参考方案2】：

一般line-height 的默认值为normal，在MDN 上显示：

normal - 取决于用户代理。桌面浏览器（包括 Firefox）使用默认值大约 1.2，具体取决于 元素的font-family。

要修复不同浏览器的不一致结果，您可以尝试为其应用number 或length 或percentage 值，并为font-family 指定网络安全字体。

另请参阅此相关帖子 - jQuery/CSS: line-height of “normal” == ?px

.txt 
    width:300px;
    height:47px;
    overflow:hidden;
    border-bottom:1px solid #aaa;
    margin-bottom:2em;
    font-size:0.8em;
    font-family:arial; /*new*/
    line-height:1.2; /*new*/

<div class="txt">
    This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. 
</div>

【参考方案3】：

行高只是解决方案的一部分。

正如其他答案所述，它因浏览器而异，您需要设置该值以获得更高的一致性。我的建议是使用em 值。

其次，您希望容器的高度是行高的倍数。因此，如果您想要一个 4 行高且行高为 1.2em 的容器，那么您将需要一个 4.8em（1.2em x 4 行）的容器高度。

.txt 
    width:300px;
    height:4.8em; /*4x the line-height to show 4 lines that are not cropped */
    overflow:hidden;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#aaaaaa;
    margin-bottom:2em;
    font-size:0.8em;
    line-height:1.2em; /* set a relative line height */

<div class="txt">
    This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. 
</div>

【参考方案4】：

每个浏览器都有不同的默认字体系列，因此您应该指定字体系列。

.txt 
    width:300px;
    height:48px;
    overflow:hidden;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#aaaaaa;
    margin-bottom:2em;
    font-size:0.8em;
    font-family: tahoma;

【参考方案5】：

您可以显式设置line-height。

line-height: 1.2;

工作示例 (JSFiddle)：

.txt 
    width:300px;
    height:48px;
    overflow:hidden;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#aaaaaa;
    margin-bottom:2em;
    font-size:0.8em;
    line-height: 1.2;

<div class="txt">
    This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. 
</div>

看来 Firefox 的默认 line-height 是 1.1，但 Chrome 的默认 line-height 是 1.2。

【讨论】：

这只对我有用，如果我也将Arial 声明为body 的字体，那么Firefox39 似乎选择Helvetica 作为默认字体？

明确设置行高（无论如何我都会这样做）对我没有帮助。 Firefox 和 Safari 中的结果肯定存在差异。举例行高：1.5em；不会在两个浏览器上以相同的像素现实结束。

似乎在较小的字体大小上差异变得更加明显。它有助于改用绝对像素值。很奇怪。

在撰写本文时（2020 年），您可能会在 Firefox 和 Chrome 上得到不同的结果，即使您明确地将字体大小（以 px 为单位）和行高设置为乘数。这是 Chrome 中的一个已知错误 - bugs.chromium.org/p/chromium/issues/detail?id=1023654。 Firefox 会将这两个值相乘并保留任何小数像素，而 Chrome 会向下舍入到最接近的整数像素。例如，如果您在两种浏览器上渲染<p style='font-size: 14px; line-height: 1.75;'>Text</p>，您将在 Firefox 上获得 24.5px，在 Chrome 上获得 24px。

JSFiddle - jsfiddle.net/8f3mb4kw - 在 Chrome 中，使用 DevTools 检查段落，转到 Computed 选项卡，您将看到 line-height: 24.5px 和 height: 24px。不应发生舍入。