Firefox 和 Chrome 中的 CSS 行高不一样

Question

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

我用 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>

Answer 1

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

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

Answer 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>

Answer 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>

Answer 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;
}

Answer 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。