防止IE中的文本輸入擴展

我遇到了IE中輸入字段的問題。該代碼適用於portlet，因爲用戶可以將portlet放在頁面中三列中任何一列上的寬度都不相同的寬度上，所以寬度必須是動態的。一如既往，它在FF中正常工作，但不在IE中。爲了使寬度dyanaic我已經設置寬度=「100％」。填充文本輸入的數據來自數據庫。當頁面呈現時，如果有一個長URL，文本輸入展開以填充IE中的內容，但在FF中它只保持相同的寬度（即其所在TD的100％）。我怎樣才能阻止IE改變寬度，以適應內容。將寬度設置爲100px的固定寬度可以解決問題，但我需要將寬度設置爲百分比，以便容納無論放置在頁面上的哪個portlet的佈局。防止IE中的文本輸入擴展

我已經嘗試過溢出：隱藏和單詞包裝：闖詞，但我不能得到任何工作。這是我的輸入代碼和樣式表

<td class="right" > 
    <input type="text" class="validate[custom[url]]" value="" id="linkText" name="communicationLink" maxlength="500" maxsize="100" /> 
</td> 

    .ofCommunicationsAdmin input { 
    font-family: "Trebuchet MS"; 
    font-size: 11px; 
    font-weight:normal; 
    color:#333333; 
    overflow:hidden; 
    } 



    .ofCommunicationsAdmin #linkText { 
    overflow:hidden; 
    width:100%; 
    border:1px 
    #cccccc solid; 
    background:#F4F7ED 
    top repeat-x; 
    } 

.ofCommunicationsAdmin td.right { 
    vertical-align: top; 
    text-align: left; 
}

來源

2009-11-11 Caroline

你能夠發佈一個鏈接到一個示例頁面，或者至少是不正確VS正確的截圖（FF VS IE）？ – 2009-11-11 16:08:24

我無法提供鏈接，因爲它是一個內部應用程序，我有一個截圖，但只是意識到我無法上傳它，而且我也無法從工作中訪問圖像託管！基本上在IE中，當表單域中有一個URL時，我的整個表的寬度會增加三倍。在FF中它保持相同，您必須將光標置於文本輸入中，並向右滾動以查看文本。 FF的行爲就是我想要的。 – Caroline 2009-11-11 16:37:45

我曾嘗試溢出：隱藏和自動換行：打破字

是啊，他們不會做任何的輸入有用。

爲了使寬度dyanaic我設置寬度=「100％」

這應該工作，但是父表需要被限制在寬度和table-layout: fixed否則auto-table-sizing算法來發揮，這是複雜的，有點破的，可能不會做你想做的。

這是我如何佈置液體形式的一個例子。請注意，使用box-sizing hack可以在支持它的瀏覽器（不是IE6-7）中精確製作不同類型控件的邊緣。

<table class="form"> 
    <col class="label" /><col class="input" /> 
    <tr> 
     <td><label for="foo">Foo</label></td> 
     <td><input type="text" name="foo" id="foo" value="bar" /></td> 
    </tr> 
</table> 

table.form { table-layout: fixed; width: 100%; } 
col.label { width: 6em; } /* let col.input have the rest of the width */ 
table.form input, table.form textarea, table.form select { 
    width: 100%; 
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 
}

來源

2009-11-11 16:11:45 bobince

感謝您的回覆。我試圖實現你給出的樣式，但它仍然在做同樣的事情，將整個portlet擴展爲屏幕大小的2/3（整個portlet只應佔用屏幕的四分之一） – Caroline 2009-11-11 17:34:29

It不適合我。你能發佈一個測試用例，包括展示失敗的外部包裝嗎？ – bobince 2009-11-11 18:51:17

我不確定你在問我什麼？ – Caroline 2009-11-12 09:36:09

我對這個派對有點遲到，但我自己卻碰到了這個問題。

如果我理解正確的問題，您的標記看起來是這樣的：

<table> 
    <tr> 
    <td>Whatever</td> 
    <td><input /></td> 
    </tr> 
</table>

所以輸入是在表中。另外，在你的CSS中，你將輸入設置爲具有基於百分比的寬度。但是，如果在輸入中放入如此多的文本以使其擴展超過可見寬度，則表將展開以適應容器。

解決這個問題確實很容易，但卻很隨意，因此沒有太多的幫助。解決方案是將此添加到您的CSS（我將它添加到我的reset.css）。

table { 
    table-layout: fixed; 
}

如果你願意，你可以使它具體化爲IE，但是對其他瀏覽器（我注意到）沒有任何壞處。

來源

2010-05-24 22:05:26 RussellUresti

什麼工作對我來說：INPUT {overflow-x:hidden; }

來源

2015-10-27 10:36:45

這不提供問題的答案。要批評或要求作者澄清，請在其帖子下方留言。 – 2015-10-27 13:35:52

爲什麼？問題是在標題或「我怎麼能阻止IE改變寬度以適應內容」，不知道這怎麼可能不是答案，我在IE6上遇到了同樣的問題並以此方式修復它。 – 2015-10-27 18:23:31

然後你應該添加完整的工作代碼片段。 – 2015-10-27 18:31:49

防止IE中的文本輸入擴展

回答

相關問題