Textarea溢出：自动高度差异

Question

以下代码呈现一个textarea，它应该有3个可见的行：

<textarea id="txtInput" rows="3" cols="20" style="overflow:auto"></textarea>

但是，在Firefox（版本20.0.1）中，显示的是4行而不是3行。

另见http://jsfiddle.net/KxXsS/

我该如何解决这个问题？

Answer 1

Firefox在文本字段后添加了额外的行。您可以使用CSS修复此问题：

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

@-moz...适用于mozilla特定规则，url-prefix规则将规则应用于网址以其开头的任何网页。

Answer 2

以下是Solution

textarea {
    height: 4em;
}

<textarea id="txtInput" rows="3" cols="20" style="overflow:auto"></textarea>

希望这有帮助。