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>
包含它的内容.
如果我有机会,我会创建一个独立的例子......
可能有一种我不知道的偷偷摸摸的 CSS 方法来实现这一点,但根据我的经验,这是使用一点 Javascript 的合理做法之一。
您可以使用 JQuery 或 Prototype 或纯 Javascript 获得所需的高度(我认为是当前窗口的高度):获取当前文档的高度,然后
document.getElementById("text_area").style.height = calculated_height+"px";
Run Code Online (Sandbox Code Playgroud)
不过,我觉得左手的衬垫很奇怪。你能发布一个例子吗?