爲什麼在IE7中表格式自動擴展輸入寬度爲100％？

我有一個約束寬度和表格單元格的百分比寬度表。在單元格input或textarea與style="width:100%"，沒有任何餘量，填充或邊框，但有一些較長的內容沒有空格。爲什麼IE7和IE6擴大輸入以匹配內容長度？爲什麼在IE7中表格式自動擴展輸入寬度爲100％？

將table-layout: fixed應用於表格不是一個選項 - 我繼續擴展列以保留其內容（例如，帶有輸入標籤的列應與標籤長度匹配）。

完整的例子如下。我檢查了這是有效的以標準模式呈現的HTML5。

<!doctype html> 
<meta charset="utf-8" /> 
<title>ie6 ie7 input bug</title> 
<style> 

    input, textarea { 
    width: 100%; 
    margin: 0; padding: 0; border: 0; 
    } 

    table { 
    background: yellow; 
    width: 500px; 
    } 

</style> 
<body> 
    <table> 
    <tr> 
     <td style="width: 15%;"> 
     <input value="VeryLongTextWithoutSpaces" /> 
     </td> 
     <td> <br/><br/><!-- give height --> </td> 
    </tr> 
    </table> 
    <br/> <!-- textarea example --> 
    table> 
    <tr> 
     <td style="width: 15%;"> 
     <textarea>VeryLongTextWithoutSpaces</textarea> 
     </td> 
     <td> <br/><br/><!-- give height --> </td> 
    </tr> 
    </table> 
</body>

來源

2010-11-16 Piotr Findeisen

缺少您打開和關閉html標記。（不是說這就解決了問題，只是說）。 – 2010-11-16 14:59:17

[100％寬度的textarea忽略IE7中父元素的寬度]的可能重複（http://stackoverflow.com/questions/33933/textarea-with-100-width-忽略父母元素寬度在ie7） – 2010-11-16 15:01:11

@保爾 - 我的表格是用液體佈局寬度寬度100％（它不會改變問題），所以我不能應用寬度像素到' td'。 @Grillz 標籤是可選的 - 這是有效的HTML5，使用w3驗證器檢查 – 2010-11-16 15:18:17

我發現，使用line-height到輸入幫助如果輸入從未包含長的話。 ~~這對我來說可能已經足夠了~~ （我可以計算出正確的行高），但其他解決方案也是可以的，因爲可能更適合其他解決方案。

終於我在這裏找到了解決方案textarea with 100% width ignores parent element's width in IE7：加入殘酷的word-break:break-all;是一個解決方案。

來源

2010-11-16 16:10:05

爲什麼在IE7中表格式自動擴展輸入寬度爲100％？

回答

相關問題