CSS行高度在Firefox和Chrome中不一样

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

我用Chrome 43.0.2357.132（64位）和Firefox 39进行了测试，在Chrome中，文本框完美地显示了前4行（其余的行隐藏），而在Firefox中，

行高显得更大，因此第四行被切掉了

我如何用CSS解决这个问题


.txt{
宽度：300px；
高度：48px；
溢出：隐藏；
边框底部样式：实心；
边框底宽：1px；
边框底色：#AAAAA；
边缘底部：2米；
字号：0.8em；
}

这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。
您可以显式设置
行高度

line-height: 1.2;

工作示例（）：

.txt{
宽度：300px；
高度：48px；
溢出：隐藏；
边框底部样式：实心；
边框底宽：1px；
边框底色：#AAAAA；
边缘底部：2米；
字号：0.8em；
线高：1.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;
}

通常，默认的
行高
值为
正常
，上面写着：

正常
-取决于用户代理。桌面浏览器（包括
Firefox）使用默认值大致1.2，具体取决于
元素的
字体系列

要修复来自不同浏览器的不一致结果，您可以尝试为其应用
数字
或
长度
或
百分比
值，还可以为
字体系列
指定web安全字体

另请参阅此相关帖子-


.txt{
宽度：300px；
高度：47px；
溢出：隐藏；
边框底部：1px实心#aaa；
边缘底部：2米；
字号：0.8em；
字体系列：arial；/*新*/
线高：1.2；/*新*/
}

这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。
线条高度只是解决方案的一部分

与其他答案状态一样，它因浏览器而异，您需要设置该值以实现更高的一致性。我的建议是使用
em
值

其次，您希望容器的高度是行高度的倍数。因此，如果您想要一个4行高且行高为1.2em的容器，那么您将需要一个4.8em（1.2em x 4行）的容器高度


.txt{
宽度：300px；
高度：4.8em；/*4x线条高度以显示4条未裁剪的线条*/
溢出：隐藏；
边框底部样式：实心；
边框底宽：1px；
边框底色：#AAAAA；
边缘底部：2米；
字号：0.8em；
线条高度：1.2em；/*设置相对线条高度*/
}

这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。这只是一个临时文本。
您可以使用以下方法为mozilla添加行高代码：

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

所有浏览器上的默认字体大小都相同吗？您在
px
中设置了高度，但在
em
中设置了字体大小。您可能希望将行高声明为（使其否决任何默认值，如果给定）。这仅适用于我，如果我还将
Arial
声明为
body
的字体，那么Firefox39似乎选择
Helvetica
作为默认字体？显式设置行高（无论如何，我这样做）对我没有帮助。Firefox和Safari中的结果肯定有区别。I.g.线高：1.5em；在两种浏览器上都不会出现相同的像素效果。似乎在较小的字体大小上，这种差异变得更加明显。它有助于使用绝对像素值。奇怪。在撰写本文时（2020年），你可能会在Firefox和Chrome上得到不同的结果，即使你明确地将px中的字体大小和行高设置为乘数。这是Chrome中的一个已知错误-。Firefox将两个值相乘并保留任何分数像素，而Chrome将舍入到最接近的整数像素。例如，如果渲染
Text
在两种浏览器上，Firefox和Chrome.JSFiddle上分别显示24.5px和24px——在Chrome中，使用DevTools检查段落，转到“计算”选项卡，您将看到行高：24.5px和高度：24px。不应出现舍入。