IE7：如何让TD浮动？

Question

我想要一组<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（标准）<！>”;不过，我正在尝试使用IE8，相信IE7渲染模式就是它所说的。 <！>“IE8兼容性视图<！>”;也是失败的，只有<！>“IE8标准<！>”;做对了。

Answer 1

我不认为这可能是你想要的。

当你将浮点数应用于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>

Answer 2

我最好的猜测：IE7及以下版本具有更严格的表格模型，不允许您更改表格元素的流程。