why input width 100% in table-layout auto expands in IE7?
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 {
bac开发者_如何学Ckground: 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 found that applying line-height to 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.
加载中,请稍侯......
精彩评论