为什么 IE7 中表格布局中的输入宽度 100% 自动扩展？
我有一个具有约束宽度的表格和具有百分比宽度的表格单元格。在单元格中，我有 input 或 textarea 和 style="width:100%"，没有任何边距、填充或边框，但有一些较长的内容没有空格。为什么IE7和IE6会扩展输入以匹配内容长度？
对表应用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>
I have a table with constraint width and table cell with percentage width. In the cell i've input or textarea with style="width:100%", without any margin, padding nor border but with some longer content without spaces. Why IE7 and IE6 expand the input to match the content length?
Applying table-layout: fixed to the table is not an option -- I relay on the columns expanding to keep their content (e.g. columns with input labels should match labels length).
Full example follows. I've check that this is valid HTML5 rendered in standards mode.
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我发现，如果输入从不包含长单词，则将
line-height应用于输入会有所帮助。这对我来说可能就足够了（我可以计算正确的行高），但欢迎其他解决方案，因为可能更适合其他人。最后我在这里找到了解决方案 textarea 与100% 宽度会忽略 IE7 中父元素的宽度：添加残酷的
word-break:break-all;是一个解决方案。I found that applying
line-heightto the input helps if the input never contains long words.This may be enough for me(I can calculate correct line-height), but other solutions are welcome, as may be more suitable for others.finally I found the solution here textarea with 100% width ignores parent element's width in IE7: adding brutal
word-break:break-all;is a solution.