始终调整< textarea>在IE，FF，Safari / Chrome下 [英] Consistently sizing a <textarea> under IE, FF, Safari/Chrome

问题描述

我有一个< textarea> ，需要适应一个空间，其大小不是预先确定的（是屏幕大小的百分比）。如果FireFox通过设置常规的CSS属性，我可以得到好的结果：

I have a <textarea> that needs to fit into a space whose size is not pre-determined (is a percentage of the screen size). I can get good results if FireFox by setting the regular CSS properties:

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

然而在IE 6和7中我得到不同的奇怪结果。在IE6中，文本框似乎有左右两边的填充，推动我的容器的大小增长。在IE7中，文本框在左侧有填充，但不会使容器的尺寸增长 - 而是右边缘推到容器外。

However in IE 6 and 7 I get different, odd results. In IE6 the textbox appears to have padding to both the left and the right, pushing the size of my container to grow. In IE7 the textbox has padding to the left, but does not make the size of the container grow - instead its right edge pushes outside of the container.

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

The height setting seems to have no effect in either IE6 or IE7; the <textarea> is 2 rows long in both cases, ignoring the height:100% directive.

有一个统一的方法来定义< textarea> 跨浏览器？

Is there a consistent way to size a <textarea> across browsers?

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

Is there a way to get rid of the padding to the left of the <textarea>?

使用位置：absolute 删除了填充，但是 width：100％仍然被破坏。 IE7似乎计算的100％宽度太大，导致< textarea> 溢出< div> code>包含它。

Using position:absolute removes the padding, but the width:100% is still screwed up. IE7 seems to calculate the 100% width to be too large, resulting in a <textarea>that spills out of the <div> that contains it.

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

I'll create a stand-alone example if I get a chance...

推荐答案

我已经看到这个问题与ASP.Net textbox控件也在IE7。我不记得我在哪里找到一个解决方案（但道具给找到它的人），但我有同样的问题，其中width =100％的文本框实际上会破坏DOM和我的整个内容部分将溢出到相邻部分（诸如基于表的导航）。

I've seen this problem with ASP.Net textbox controls also in IE7. I couldn't remember where I found a solution (but props to the person that found it), but I was having the same problem where the textbox with width="100%" would actually break the DOM and my entire content section would "spill" onto a neighboring section (such as a table based navigation).

我最终采用的解决方案是将asp：Textbox包装在自己的表格中，并设置table-layout：fixed; width：100％ textbox / textareaposition：relative; width：100％;因此该块将如下所示：

The solution I eventually adopted was to wrap the asp:Textbox inside its own table and set the "table-layout:fixed; width: 100%" property and on the textbox/textarea "position:relative; width: 100%;" so the block would look like this:

<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>

这不是最漂亮的解决方案，但我已经验证它可以跨所有浏览器工作。我有一个关于这个问题的写作

This is not the prettiest solution, but I have verified that it does work cross all browsers. I have a write-up on this issue HERE.

希望这样做有帮助。

这篇关于始终调整< textarea>在IE，FF，Safari / Chrome下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！