浏览器支持textarea的属性行

Question

我注意到浏览器对于以下

的行为有所不同

<textarea rows="4"></textarea>

（jsfiddle

在Chrome中，您可以调整textarea的大小，但不能小于3行。但是，在firefox中，rows属性似乎被忽略了。最重要的是，在IE11中你根本无法调整它的大小！

这是否有解决方法？

Answer 1

关于IE，出现调整大小问题是因为重新调整大小是由CSS resize属性完成的，IE不支持该属性。 使用Resizable插件可以解决此问题：

示例

HTML：

<textarea type="textarea" id="txtArea" placeholder="enter the message..."></textarea>

jQuery的：

$("#txtArea").resizable();

CSS：

 #txtArea { overflow: hidden; /* for the scrollbars */}

对于Firefox，它总是在文本字段后添加一行。如果你想让它具有恒定的高度，你需要使用CSS。

总的来说，当涉及到不同浏览器中textarea的高度或任何其他样式时，没有开箱即用的解决方案。因此，只有可能的解决方案是使用CSS或Javascript。

如果你想定位Firefox：

@-moz-document url-prefix() {
    textarea {
        height: 4em /* or use px to be sure */ ; 
    }
}