2008-08-29 108 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寬度應能正常工作