CSS Firefox 和 Chrome 中的行高不同

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

您可以明确设置 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。

Answer 2

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

.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 3

一般来说，默认的 line-height 值是 normal，在 MDN 上它说：

normal - Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.

要修复不同浏览器的不一致结果，您可以尝试为其应用 number 或 length 或 percentage 值，同时为 [= 指定网络安全字体15=].

另见相关 post - 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 4

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

如其他答案所述，它因浏览器而异，您需要设置该值以获得更大的一致性。我的建议是使用 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 5

您可以使用以下方式为 mozilla 添加行高代码：

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

CSS Firefox 和 Chrome 中的行高不同

CSS line-height not the same in Firefox and Chrome

css

firefox

google-chrome

cross-browser

工作示例（JSFiddle）：