IE7：如何让TD浮动？

我想要一套<td>s 在 IE7 中向左浮动。如果窗口太小，它们应该中断到下一行。

CSS

table {
  width: 100%;
}
td {
  border: 1px solid red;
}
tr.f td {
  width: 500px;
  float: left;
}

HTML:

<table>
  <tr class="f">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

这适用于 IE8 和 Firefox，但不适用于 IE7。我究竟做错了什么？

页面渲染模式为“IE7（Quirks）”或“IE7（Standards）”。不过，我正在尝试使用 IE8，相信 IE7 渲染模式就是它所说的那样。 “IE8 兼容性视图”也失败了，只有“IE8 标准”才正确。

我认为这不可能按照你想要的方式进行。

当您将 float 应用于 td 元素时 [在 FF/IE8 中]，根据 CSS 2.1 规范，它们将成为匿名表对象。本质上，它们不再是表格单元格，并且这些匿名对象具有可浮动的显示类型。

IE7 不遵循这部分规范，事实上，单元格的显示类型根本无法更改，并且显示类型为 table-cell 的对象无法浮动。

如果您绝对需要使用表格（而不是 ul/li），您可以这样做吗？

<style type="text/css" media="screen">`
    table {
        width: 100%;
    }
    .f {
        border: 1px solid red;
        float: left;
        height: 10px;
        width: 500px;
    }
</style>

<table summary="yes">
    <tr><td>
    <span class="f">1</span>
    <span class="f">2</span>
    <span class="f">3</span>
  </td></tr>
</table>