在IE,FF,Safari/Chrome下持续调整<textarea>的大小

Par*_*and 10 css textarea cross-browser

我有一个<textarea>需要适应其大小未预先确定的空间(是屏幕大小的百分比).如果FireFox通过设置常规CSS属性,我可以获得良好的结果:

#container { width: 70%; height:70% }
#text_area { width: 100%; height: 100%; margin: 0; padding:0; }
Run Code Online (Sandbox Code Playgroud)

然而在IE 6和7中,我得到了不同的,奇怪的结果.在IE6中,文本框似乎在左侧和右侧都有填充,从而推动容器的大小增长.在IE7中,文本框在左侧有填充,但不会使容器的大小增大 - 而是将其右边缘推到容器外部.

高度设置似乎对IE6或IE7没有影响; 的<textarea>是2行长在这两种情况下,忽略了高度:100%的指令.

是否有一致的方法来<textarea>跨浏览器调整大小?

有没有办法摆脱左边的填充<textarea>


更新

使用position:absolute删除填充,但width:100%仍然搞砸了.IE7似乎计算出100%的宽度太大,导致<textarea>溢出<div>包含它的内容.

如果我有机会,我会创建一个独立的例子......

Pek*_*ica 0

可能有一种我不知道的偷偷摸摸的 CSS 方法来实现这一点,但根据我的经验,这是使用一点 Javascript 的合理做法之一。

您可以使用 JQuery 或 Prototype 或纯 Javascript 获得所需的高度(我认为是当前窗口的高度):获取当前文档的高度,然后

document.getElementById("text_area").style.height = calculated_height+"px";
Run Code Online (Sandbox Code Playgroud)

不过,我觉得左手的衬垫很奇怪。你能发布一个例子吗?