css - 在 IE、FF、Safari/Chrome 下一致调整 <textarea> 的大小

Question

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

#container { width: 70%; height:70% }
#text_area { width: 100%; height: 100%; margin: 0; padding:0; }

但是在 IE 6 和 7 中我得到了不同的、奇怪的结果。在 IE6 中，文本框似乎在左侧和右侧都有填充，从而插入容器的大小增加。在 IE7 中，文本框向左填充，但不会增加容器的大小 - 相反，它的右边缘会推到容器之外。

高度设置似乎在 IE6 或 IE7 中都没有效果； <textarea>在这两种情况下都是 2 行长，忽略 height:100% 指令。

是否有一致的方法来确定 <textarea> 的大小？跨浏览器？

有没有办法去掉 <textarea> 左边的填充？ ？

---

更新

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

如果有机会，我会创建一个独立的示例...

Answer 1

我在 IE7 中也看到了 ASP.Net 文本框控件的这个问题。我不记得我在哪里找到了解决方案(但对找到它的人表示支持)，但我遇到了同样的问题，width="100%"的文本框实际上会破坏 DOM，我的整个内容部分将“溢出”到相邻部分(例如基于表格的导航)。

我最终采用的解决方案是将 asp:Textbox 包装在它自己的表格中，并设置 "table-layout:fixed; width: 100%"属性，并在文本框/文本区域上设置 "position:relative; width: 100% ;"所以这个 block 看起来像这样:

<table style="width: 100%; table-layout: fixed;">
  <tbody>
    <tr>
     <td>
      <asp:Textbox id="txtMyTextbox" runat="server" Width="100%" style="position: relative;"/>
     </td>
    </tr>
   </tbody>
 </table>

这不是最漂亮的解决方案，但我已经验证它确实适用于所有浏览器。我有一篇关于这个问题的文章 HERE .

希望这对您有所帮助。