textarea的高度与Firefox中的行不匹配

Question

textarea的rows属性与Firefox中的行数不匹配.例如:

<textarea rows=4 cols=40>
1
2
3
4
this line is visible in FF
</textarea>

示例:http://jsfiddle.net/Z7zXs/6/

我该如何解决这个问题？textarea应该只显示4行(而不是5行)rows=4.

Answer 1

有很多答案,但不适合我:

• CSS rule(height: 5em;)不灵活enoutgh,因为它完全覆盖了rows属性
• 而且我不想使用JavaScript

有一个"错误":TEXTAREA错误地应用ROWS =和COLS =

所以这是我的解决方案:

FF为TextArea添加高度以保留滚动条的位置.

我不需要水平滚动条,因此它有助于解决问题:可以将以下css规则添加到textarea:

overflow-x: hidden;

这是一个例子.它甚至可以使用rows=1.

Answer 2

Firefox总是在文本字段后添加一行.如果您希望它具有恒定的高度,请使用CSS,例如:

textarea {
    height: 5em;
}

http://jsfiddle.net/Z7zXs/7/

编辑: 您还可以使用@-moz-document url-prefixCSS扩展仅针对Firefox浏览器.例

@-moz-document url-prefix() {
    textarea {
        height: 5em;
    }
}