2008-08-29 94 views
9

我已经在表中的下列的textarea:textarea的具有100%的宽度忽略父元素的宽度在IE7

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

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

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

随着textarea的一个长字符串,textarea的伸出来容纳它在IE7一行,但在其他浏览器中保留其300像素的宽度。

任何想法如何解决这个在IE浏览器?

回答

0

你尝试......

overflow: hidden;

我不知道是否应该在textarea的表...实验了一下

0

,或者怎么样:

overflow: scroll; 

编辑:

我实际测试这个。我认为行为是这样的,因为宽度在桌子上,我相信(我没有什么可以支持的),我很久以前就知道桌子的宽度是,建议的宽度是,但可以扩展以容纳其内容。不确定。我知道如果你使用<DIV>而不是表格,它可以工作。此外,如果将300像素宽度应用于包含<TD>元素而不是<TABLE>元素,则它也可以工作。另外,overflow: scroll什么都不做! :P

好的,时髦的IE行为,当然!

4

将宽度应用于td而不是table

编辑:@Emmett - 宽度可以很容易地通过CSS应用。

td { 
    width: 300px; 
} 

产生期望的结果。或者,如果你使用jQuery,您可以通过脚本添加的宽度:

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

点是,有一个宽应用到表格单元格的方法不止一种,如果发展限制阻止您直接应用它。

2

@Peter MeyerJim Robert

我尝试不同的溢出价值,但无济于事。

对包装属性和单词包装样式的不同值进行试验也没有成效。

编辑:

@dansaysseanb

由于一些尴尬应用专用约束,该宽度只能应用到表。

@travis

设置样式= “字突破:突破 - 所有;”有点工作!它仍然在IE7和FF中有不同的包装。如果没有更好的东西出现,我会接受这个答案。

0

我能找到使工作,一个小哈克最棒的地方:
包textarea的与<div style="width:300px; overflow:auto;"> 可能要玩的溢出值

0

overflow属性是要走的路。特别是,如果您希望忽略额外的文本,则可以使用“overflow:hidden”作为文本的css属性。一般来说,当浏览器有一个不可破解的对象,比如没有空格的长字符串时,它可能会在各种大小约束(字符串(长)与其容器(短))之间产生冲突。如果你在不同的浏览器中看到不同的行为,他们只是以不同的方式解决这个冲突。

顺便说一句,有一个很好的把戏可用于长字符串 - <和>标签。如果您的浏览器看到longstringlongstring,那么它会尝试将它作为一个单一的,不间断的字符串装入容器中 - 但如果它不适合,它会在该wbr中将该字符串分成两半。如果可能的话,它基本上是一个带有隐式请求的断点(有点像打印文本中的连字符)。顺便说一句,在Safari和Opera的某些版本中有点小错误 - 请查看this quirksmode page了解更多信息。

1

另一个非常哈克选项,如果你被卡住了很多的限制,但知道周围的DOM将是什么样子:

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

不漂亮,但确实在IE7的工作。
使用jquery或类似将是一个更简洁的解决方案,但它取决于你有其他约束。

0

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

你没事设置300宽度只要元素的内容不能超过(设置一个div一定宽度的内部和溢出规则是我最喜欢的方式)。

但缺少像上面的解决方案,任元推你过去那种宽度分钟,全盘皆输。该元素变得尽可能宽以容纳内容。

额外的小费 - 包住你的宽度值在任何一组引号将巢值正确(<table width='300')。如果某人出现并将其更改为%,则会忽略%,否则。

不幸的是,你总是有没有在IE的“自然”休息,除非你可以做一些通过代码来打破他们闹掰的字符串。

2

另一个哈克选项,但对我的作品的唯一选择 - 这一切都不页面上的其他建议都 - 是有固定表格布局包裹的textarea的单细胞表。

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

为了解决这个问题,你在你的文本中使用的空间,并且你也使用此代码

overflow:hidden 
0

给在pixels.this宽度应能正常工作

相关问题