Html 100% 宽度 textarea 在 IE7 中忽略父元素的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
100% width textarea ignores parent element's width in IE7
提问by Emmett
I have the following textareain a table:
我textarea在 a 中有以下内容table：
<table width="300"><tr><td>
<textarea style="width:100%">
longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring
</textarea>
</td></tr></table>
With a long string in the textarea, the textarea stretches out to accommodate it in one line in IE7, but retains its 300px width in other browsers.
在 textarea 中有一个长字符串，textarea 在 IE7 中伸展以容纳它在一行中，但在其他浏览器中保留其 300px 宽度。
Any ideas as to how to fix this in IE?
关于如何在 IE 中解决此问题的任何想法？
回答by dansays
Apply the width to the td, not the table.
将宽度应用于td，而不是table。
EDIT: @Emmett - the width could just as easily be applied via CSS.
编辑：@Emmett - 宽度可以通过 CSS 轻松应用。
td {
width: 300px;
}
produces the desired result. Or, if you're using jQuery, you could add the width through script:
产生想要的结果。或者，如果您使用 jQuery，则可以通过脚本添加宽度：
$('textarea[width=100%]').parent('td').css('width', '300px');
Point being, there's more than one way to apply a width to a table cell, if development constraints prevent you from applying it directly.
重点是，如果开发限制阻止您直接应用宽度，则有不止一种方法可以将宽度应用于表格单元格。
回答by Emmett
I tried different overflow values, to no avail.
我尝试了不同的溢出值，但无济于事。
Experimenting with different values for the wrap attribute and the word-wrap style also wasn't fruitful.
对 wrap 属性和自动换行样式尝试不同的值也没有结果。
EDIT:
编辑：
Due to some awkward application-specific constraints, the width can only be applied to the table.
由于一些尴尬的特定于应用程序的约束，宽度只能应用于表格。
@特拉维斯
Setting style="word-break:break-all;" sort of worked! It still wraps differently in IE7 and FF. I'll accept this answer if nothing better comes up.
设置 style="word-break:break-all;" 有点工作！它在 IE7 和 FF 中的包装方式仍然不同。如果没有更好的结果，我会接受这个答案。
回答by Emmett
Another hacky option, but the only option that works for me - none of the other suggestions on this page do - is to wrap the textarea in a single cell table with a fixed table layout.
另一个 hacky 选项，但唯一对我有用的选项 - 此页面上的其他建议都没有 - 是将 textarea 包装在具有固定表格布局的单个单元格表格中。
<table style="width:100%;table-layout:fixed"><tr><td>
<textarea style="width:100%">longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring</textarea>
</td></tr></table>
回答by seanb
Another very hacky option, if you are stuck with a lot of constraints, but know what the surrounding dom will look like:
另一个非常 hacky 的选择，如果您遇到很多限制，但知道周围的 dom 会是什么样子：
style="width:100%;width:expression(this.parentNode.parentNode.parentNode.parentNode.width +'px')"
not pretty, but does work in IE7.
Using jquery or similar would be a much neater solution, but it depends on the other constraints you have.
不漂亮，但在 IE7 中确实有效。
使用 jquery 或类似的将是一个更简洁的解决方案，但这取决于您拥有的其他约束。
回答by John Dunagan
I've run into this problem before. It's related to how HTML parses table and cell widths.
我以前遇到过这个问题。它与 HTML 如何解析表格和单元格宽度有关。
You're fine setting 300 as a width as long as the contents of the element can never exceed that (setting a div with a definite width inside and an overflow rule is my favorite way).
只要元素的内容永远不会超过该宽度，您就可以将 300 设置为宽度（设置具有确定宽度的 div 和溢出规则是我最喜欢的方式）。
But absent a solution like the above, the minute ANY element pushes you past that width, all bets are off. The element becomes as wide as it has to to accommodate the contents.
但是如果没有像上面这样的解决方案，任何微小的元素都会把你推过那个宽度，所有的赌注都没有了。元素变得尽可能宽以容纳内容。
Additional tip - encase your width values in whatever set of quotes will nest the value properly (<table width='300'). If someone comes along and changes it to a %, it will ignore the %, otherwise.
附加提示 - 将您的宽度值括在任何可以正确嵌套值的引号中 ( <table width='300')。如果有人出现并将其更改为 %，它将忽略 %，否则。
Unfortunately, you're always going to have trouble breaking strings that do not have 'natural' breaks in IE, unless you can do something to break them up via code.
不幸的是，除非您可以通过代码做一些事情来分解它们，否则在 IE 中打破没有“自然”中断的字符串总是会遇到麻烦。
回答by Saeed
For solve this issue you use space in your text,and you too use this code
为了解决这个问题，您在文本中使用空格，并且您也使用此代码
overflow:hidden
回答by Mukesh
Give the width in pixels.this should work properly
以像素为单位给出宽度。这应该可以正常工作
回答by seanb
Best thing I could find to make it work, a little hacky:
wrap textarea with <div style="width:300px; overflow:auto;">might want to play around with the overflow value
我能找到的让它工作的最好的东西，有点hacky：
wrap textarea with<div style="width:300px; overflow:auto;">可能想要玩弄溢出值
回答by Tyler
The overflow property is the way to go. In particular, if you want the extra text to be ignored, you can use "overflow:hidden" as a css property on the text.
溢出属性是要走的路。特别是，如果您希望忽略多余的文本，可以使用“overflow:hidden”作为文本的 css 属性。
In general, when a browser has an unbreakable object, such as a long string without spaces, it can have a conflict between various size constraints - those of the string (long) vs its container (short). If you see different behavior in different browsers, they are just resolving this conflict differently.
一般来说，当浏览器有一个牢不可破的对象时，例如一个没有空格的长字符串，它可能会在各种大小限制之间发生冲突 - 字符串（长）与其容器（短）的限制。如果您在不同的浏览器中看到不同的行为，他们只是在以不同的方式解决此冲突。
By the way, there is a nice trick available for long strings - the <wbr> tag. If your browser sees longstringlongstring, then it will tryto fit it in the container as a single, unbroken string -- but if it can't fit, it will break that string in half at the wbr. It's basically a break point with a implicit request to not break there, if possible (sort of like a hyphen in printed texts). By the way, it's a little buggy in some versions of Safari and Opera - check out this quirksmode pagefor more.
顺便说一句，对于长字符串有一个很好的技巧——<wbr> 标签。如果您的浏览器看到 longstringlongstring，那么它会尝试将它作为一个完整的字符串放入容器中——但如果它不能放入，它将在 wbr 处将该字符串分成两半。如果可能的话，它基本上是一个带有隐式请求的断点，不要在那里中断（有点像印刷文本中的连字符）。顺便说一下，它在某些版本的 Safari 和 Opera 中有点问题 - 查看这个 quirksmode 页面了解更多信息。
回答by Jiaaro
did you try...
你试过了吗...
overflow: hidden;
overflow: hidden;
??
??
I'm not sure if it should be in the table of the textarea... experiment a bit
我不确定它是否应该在 textarea 的表格中......实验一下
