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

前端之家收集整理的这篇文章主要介绍了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.f2er.com/css/217455.html

猜你在找的CSS相关文章