Question

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

Answer 1

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

最后我在这里找到了解决方案textarea with 100% width ignores parent element's width in IE7：添加残酷的word-break:break-all;是一种解决方案。

为什么表格布局中的输入宽度100％在IE7中扩展？

1 个答案: