2

我注意到以下浏览器的行为有所不同

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

（jsfiddle

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

有解决办法吗？

4

1 回答 1

3

关于 IE，会出现调整大小问题，因为调整大小是resize由 IE 不支持的 CSS 属性完成的。这个问题可以通过使用Resizable插件来解决：

例子

HTML：

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

jQuery：

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

CSS：

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

对于 Firefox，它总是在文本字段之后添加一个额外的行。如果您希望它具有恒定的高度，则需要使用 CSS。

所以总的来说，当涉及到不同浏览器中文本区域的高度或任何其他样式时，没有开箱即用的解决方案。所以剩下的唯一可能的解决方案是使用 CSS 或 Javascript。

如果你想定位 Firefox：

@-moz-document url-prefix() {
    textarea {
        height: 4em /* or use px to be sure */ ; 
    }
}
于 2014-03-10T15:10:09.400 回答