在IE，FF，Safari / Chrome下持续调整的大小

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:

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

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

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.

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

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.

高度设置似乎对IE6或IE7没有影响;在两种情况下,都是2行,忽略高度:100%指令。</p>

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

是否有一致的方法来跨浏览器调整的大小?</p>

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

有没有办法摆脱左边的填充?</p>

---

Update

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.

使用position:absolute删除填充,但宽度:100%仍然被搞砸了。 IE7似乎计算出100%的宽度太大,导致溢出包含它的

。

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

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

5 个解决方案

#1

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

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

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:

我最终采用的解决方案是将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>

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.

这不是最漂亮的解决方案,但我已经确认它可以跨所有浏览器工作。我在这里写了一篇关于这个问题的文章。

Hope this helped.

希望这有帮助。

#2

There may be a sneaky CSS way to achieve this that I don't know about, but in my experience this is one of the things where using a bit of Javascript is justified.

可能有一种偷偷摸摸的CSS方式来实现这一点,我不知道,但根据我的经验,这是使用一些Javascript是合理的事情之一。

You could get the height you need (of the current window I presume) using JQuery or Prototype, or in pure Javascript: Get the height of the current document and then

您可以使用JQuery或Prototype获得所需的高度(我假设的当前窗口),或者使用纯Javascript:获取当前文档的高度然后

document.getElementById("text_area").style.height = calculated_height+"px";

The left hand padding I find odd, though. Can you post an example?

我发现左手填充物很奇怪。你能发一个例子吗?

#3

In order to solve this kind of problems, one has to think about how percentage is handled in the browser. First of all.... percentages don't exist, they are converted to pixels at some point. The steps are 1) browser renders all tags, 2) browser measures outer, parent, percent-sized boxes to get its size in pixels, and sets the size of the child boxes according to their percentage size. I think the first thing to verify is the size of textarea's parent box, and it's parent box, and so on. This can be done by checking the "Layout" information in Firebug and IE Developer Toolbar, and find out what's measured differently in both browsers. Once you find that element (or elemets) css can be adjusted to consider them.

为了解决这类问题,我们必须考虑如何在浏览器中处理百分比。首先......百分比不存在,它们在某些时候被转换为像素。步骤是1)浏览器呈现所有标签,2)浏览器测量外部,父级,百分比大小的框以获得其大小(以像素为单位),并根据子框大小设置子框的大小。我认为要验证的第一件事是textarea的父框的大小,以及它的父框,依此类推。这可以通过检查Firebug和IE Developer Toolbar中的“布局”信息来完成,并找出两种浏览器中测量的不同。一旦你发现那个元素(或elemets)可以调整css来考虑它们。

Have in mind that percentage sizing considers the width and height of parent box content to size the child element and not padding. So, if a parent box width is 500px and has 100px padding, a child element with 100% width will be 500px and the 100px padding will be around it, and both elements will take 700px of your screen.

请记住,百分比大小调整会考虑父框内容的宽度和高度来调整子元素的大小而不是填充。因此,如果父框宽度为500px且具有100px填充,则100%宽度的子元素将为500px,并且100px填充将围绕它,并且两个元素将占用屏幕的700px。

#4

Try

adding a min-height:100% on the text area css. On the div containing the absolute positioned , set the position to relative on your css.

在文本区域css上添加最小高度:100%。在包含绝对定位的div上,在css上将位置设置为relative。

also use transistional Doctypes instead of strict, while your at it. Make sure there are no unclosed tags. I would be better if you can make the page XHTML or HTML standard compliant so that you will have less problems with cross browser compatibility.

也可以使用transistional Doctypes而不是严格的,而你的。确保没有未关闭的标签。如果您可以使页面符合XHTML或HTML标准,那么我会更好,这样您就可以减少跨浏览器兼容性的问题。

#5

Try adding display:blockand border:0 to your #text_area. The former should take care of the height-issue and the latter prevents the width:100% to spill over.

尝试将display:blockand border:0添加到#text_area。前者应该处理高度问题,后者应该防止宽度:100%溢出。