为什么在 IE7 中自动扩展表格布局中的输入宽度 100%？答案

【问题标题】：why input width 100% in table-layout auto expands in IE7?为什么在 IE7 中自动扩展表格布局中的输入宽度 100%？
【发布时间】：2010-11-17 19:08:41
【问题描述】：

我有一个带有约束宽度的表格和一个带有百分比宽度的表格单元格。在单元格中，我有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>

【问题讨论】：

缺少您的开始和结束 html 标记。（并不是说这样就解决了问题，只是说。）
textarea with 100% width ignores parent element's width in IE7 的可能重复项
@Paul -- 我的表格用于液体布局宽度宽度 100%（它不会改变问题），所以我不能将宽度（以像素为单位）应用于td。 @Grillz 标签是可选的——这是有效的 HTML5，使用 w3 验证器检查
我自己关于应用line-height 的回答对于没有空格的长输入无效，所以我正在重新编辑我的问题

标签： input internet-explorer-7 internet-explorer-6 width tablelayout

【解决方案1】：

我发现将line-height 应用于输入有助于如果输入从不包含长词。 ~~这对我来说可能就足够了~~（我可以计算出正确的行高），但欢迎使用其他解决方案，因为可能更适合其他人。

终于在textarea with 100% width ignores parent element's width in IE7这里找到了解决办法：加上野蛮的word-break:break-all;就是解决办法。

【讨论】：