FireFox 浏览器中的 Textarea 额外行

Question

在 FireFox HTML <textarea> 中比属性 rows 中指定的多一行。如果您使用的是 FireFox，您可以在此处查看：

<textarea rows="2">
This clearly has 3 rows and not 2 like you might think.
</textarea>

如果您现在没有使用 FireFox，那么这就是我认为的片段结果：

Answer 1

正确评估标签文本区域的行属性你应该记住，这被认为是与 cols

结合的工作

对于 cols（形成 MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea ）你有 cols 文本控件的可见宽度，以平均字符宽度表示。如果指定，则必须为正整数。如果不指定，默认值为20(HTML5).

因此行数不仅取决于您为行指定的值，还取决于计算的文本长度在 cols 长度值上的平均字符宽度

Answer 2

我的建议是不要使用 cols 和 rows 属性。使用 CSS 宽度和高度属性确保跨浏览器的体验一致。

Answer 3

是的，这是 Firefox 中一个古老的错误，至今仍未修复：https://bugzilla.mozilla.org/show_bug.cgi?id=33654。

有一个解决方法：

textarea {
  overflow-x: hidden
}

我不知道此解决方法是否会导致任何问题 - textarea 是否有可能水平溢出？

Textarea extra row in FireFox browser