100% 宽度 textarea 在 IE7 中忽略父元素的宽度

Question

我在table有以下textarea ：

<table width="300"><tr><td>

<textarea style="width:100%">
longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring
</textarea>

</td></tr></table>

在 textarea 中有一个长字符串，textarea 在 IE7 中伸展以容纳它在一行中，但在其他浏览器中保留其 300px 宽度。

关于如何在 IE 中解决这个问题的任何想法？

Answer 1

将宽度应用于td ，而不是table 。

编辑：@Emmett - 宽度可以通过 CSS 轻松应用。

td {
    width: 300px;
}

产生想要的结果。 或者，如果您使用 jQuery，则可以通过脚本添加宽度：

$('textarea[width=100%]').parent('td').css('width', '300px');

重点是，如果开发限制阻止您直接应用宽度，则有不止一种方法可以将宽度应用于表格单元格。

Answer 2

@ 彼得迈耶， 吉姆罗伯特

我尝试了不同的溢出值，但无济于事。

对 wrap 属性和自动换行样式尝试不同的值也没有结果。

编辑：

@ 丹赛斯， seanb

由于一些尴尬的特定于应用程序的约束，宽度只能应用于表格。

@ 特拉维斯

设置 style="word-break:break-all;" 有点工作！ 它在 IE7 和 FF 中的包装方式仍然不同。 如果没有更好的结果，我会接受这个答案。

Answer 3

另一个 hacky 选项，但唯一对我有用的选项 - 此页面上的其他建议都没有 - 是将 textarea 包装在具有固定表格布局的单个单元格表格中。

<table style="width:100%;table-layout:fixed"><tr><td>
<textarea style="width:100%">longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring</textarea>
</td></tr></table>

Answer 4

另一个非常 hacky 的选择，如果您遇到很多限制，但知道周围的 dom 会是什么样子：

style="width:100%;width:expression(this.parentNode.parentNode.parentNode.parentNode.width +'px')"  

不漂亮，但在 IE7 中确实有效。
使用 jquery 或类似的将是一个更简洁的解决方案，但这取决于您拥有的其他约束。

Answer 5

为了解决这个问题，您在文本中使用空格，并且您也使用此代码

overflow:hidden

Answer 6

以像素为单位给出宽度。这应该可以正常工作

Answer 7

你试过了吗...

overflow: hidden;

??

我不确定它是否应该在 textarea 的表格中......实验一下

Answer 8

或者，怎么样：

overflow: scroll;

编辑：

我实际上对此进行了测试。 我认为这种行为是因为宽度在桌子上，我相信（我没有什么可以支持这一点）我很久以前读到桌子宽度是建议的宽度，但可以扩展以适应其内容。 没有把握。 我知道如果您使用<DIV>而不是表格，它会起作用。 此外，如果将 300 像素宽度应用于包含<TD>元素而不是<TABLE>元素，它也能正常工作。 此外， overflow: scroll什么都不做！ :P

不错，时髦的 IE 行为，当然！

Answer 9

IE 还支持word-break CSS 3 属性。

Answer 10

我能找到的让它工作的最好的东西，有点hacky：
用<div style="width:300px; overflow:auto;">包裹 textarea 可能想要玩弄溢出值

Answer 11

溢出属性是要走的路。 特别是，如果您希望忽略多余的文本，可以使用“overflow:hidden”作为文本的 css 属性。

一般来说，当浏览器有一个牢不可破的对象时，例如一个没有空格的长字符串，它可能会在各种大小限制之间发生冲突 - 字符串（长）与其容器（短）的限制。 如果您在不同的浏览器中看到不同的行为，他们只是在以不同的方式解决此冲突。

顺便说一句，对于长字符串有一个很好的技巧——<wbr> 标签。 如果您的浏览器看到 longstringlongstring，那么它会尝试将它作为一个完整的字符串放入容器中——但如果它不能放入，它将在 wbr 处将该字符串分成两半。 如果可能的话，它基本上是一个带有隐式请求不要在那里中断的断点（有点像印刷文本中的连字符）。 顺便说一下，它在某些版本的 Safari 和 Opera 中有点问题 - 查看这个 quirksmode 页面了解更多信息。

Answer 12

我以前遇到过这个问题。 它与 HTML 如何解析表格和单元格宽度有关。

只要元素的内容永远不会超过该宽度，您就可以将 300 设置为宽度（设置具有确定宽度的 div 和溢出规则是我最喜欢的方式）。

但是如果没有像上面这样的解决方案，任何微小的元素都会把你推过那个宽度，所有的赌注都没有了。 元素变得尽可能宽以容纳内容。

附加提示 - 将您的宽度值括在任何引号中都会正确嵌套该值（ <table width='300' ）。 如果有人出现并将其更改为 %，它将忽略 %，否则。

不幸的是，除非您可以通过代码做一些事情来分解它们，否则在 IE 中打破没有“自然”中断的字符串总是会遇到麻烦。