Firefox 和 Chrome 中的 CSS 行高不同

CSS line-height not the same in Firefox and Chrome

提问by basZero

Goal: Just show the first four lines in a text box.

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

I tested JSFiddle Demowith Chrome 43.0.2357.132 (64-bit) and Firefox 39 and in Chrome the text box shows perfectly the first 4 lines (remaining lines are hidden) whereas in Firefox the line-heightappears larger, therefore the fourth line got cut.

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

How can I solve this with CSS?

我怎样才能用 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>

采纳答案by Alexander O'Mara

You could explicitly set the line-height.

您可以显式设置line-height.

line-height: 1.2;

Working Example (JSFiddle):

工作示例（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>

It appears Firefox has a default line-heightof 1.1, but Chrome has a default line-heightof 1.2.

似乎 Firefox 的默认line-height值为1.1，但 Chrome 的默认line-height值为1.2。

回答by Stickers

In general the default line-heightvalue is normal, on MDNit says:

通常默认line-height值是normal，在MDN 上它说：

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

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

To fix the inconsistency results from different browsers, you could try apply a numberor lengthor percentagevalue for it, also specify a web-safe font for font-family.

要修复来自不同浏览器的不一致结果，您可以尝试为其应用 a numberor lengthorpercentage值，同时为font-family.

Also see this related post - jQuery/CSS: line-height of “normal” == ?px

另请参阅此相关帖子 - 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>

回答by IMI

Line-height is only part of the solution.

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

As the other answers state, it varies by browser and you will want to set the value for greater consistency. My suggestion is to use emvalues.

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

Secondly, you will want the height of your container to be a multiple of the line-height. So, if you want a container that is 4 lines high and your line-height is 1.2em, then you will want a container height of 4.8em (1.2em x 4 lines).

其次，您希望容器的高度是行高的倍数。因此，如果您想要一个高度为 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>

回答by Mouhamad Kawas

Each browser has a different default font-family, so you should specify the font-family.

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

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

回答by Akshay Gurav

You can add line height code for mozilla using:

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

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