html - 文本区域溢出：自动高度差

Question

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

<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 规则将规则应用于 URL 以它开头的任何页面。

Answer 2

这是解决方案

textarea {
    height: 4em;
}

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

希望这可以帮助。