css – 在IE,FF,Safari / Chrome下持续调整大小

我有一个< 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行长,忽略高度：100％指令.

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

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

更新

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

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

解决方法

我在IE7中也看到了ASP.Net文本框控件的这个问题.我不记得我找到了解决方案的位置(但找到了解决方案的人的道具),但是我遇到了同样的问题,其中width =“100％”的文本框实际上会破坏DOM而我的整个内容部分将“溢出到相邻部分(例如基于表格的导航).

我最终采用的解决方案是将asp：TextBox包装在自己的表中并设置“table-layout：fixed; width：100％”属性,并在textBox / textarea“position：relative; width：100％;”所以块看起来像这样：

<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上写了一篇文章.

希望这有帮助.

原文地址：https://www.jb51.cc/css/217455.html