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

你可以明确地设置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

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

\n\n

\n

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

\n

\n\n

要修复不同浏览器结果不一致的问题，您可以尝试为其应用number或length或percentage值，并为font-family.

\n\n

另请参阅此相关帖子 - jQuery/CSS: line-height of \xe2\x80\x9cnormal\xe2\x80\x9d == ?px

\n\n

\r\n

\r\n

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

\r\n

<div class="txt">\r\n    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. \r\n</div>

\r\n

\r\n

\r\n

\n