为什么在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％？

回答

相关问题