IE7:如何让TD浮动?

时间:2009-06-19 14:03:53

标签: css internet-explorer-7

我想在IE7中向左浮动一组<td>。如果窗口太小,它们应该突破到下一行。

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标准”才能做到这一点。

2 个答案:

答案 0 :(得分:4)

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

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

答案 1 :(得分:0)

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