Firefox 和 Chrome 中的 CSS 行高不同

Question

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

我测试了JSFiddle Demo使用 Chrome 43.0.2357.132(64 位)和 Firefox 39，在 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.