IE7：如何使TD浮动？ [英] IE7: How to make TD float?

问题描述

我想要一组< td> 在IE7中向左浮动。

 <$ p 
 
 
 
 
 
 c $ c> 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的对象无法浮动。

如果您绝对需要使用

 < style type =text / cssmedia =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> 
  

I want a set of <td>s to float left in IE7. They should break onto the next line if the window is too small.

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>

This works in IE8 and Firefox, but not in IE7. What am I doing wrong?

Page rendering mode is "IE7 (Quirks)" or "IE7 (Standards)". I'm trying with IE8, though, trusting that IE7 rendering mode is what it says. "IE8 Compatibility View" is failing as well, only "IE8 Standards" gets it right.

解决方案

I don't think this is possible the way you want.

When you apply the float to td elements [in FF/IE8[ they become anonymous table objects as per the CSS 2.1 spec. Essentially, they're no longer table cells, and these anonymous objects have a display type that is floatable.

IE7 doesn't follow this part of the spec, in fact, the display type of the cells cannot be altered at all, and objects with a display type of table-cell can't be floated.

If you absolutely need to use a table (instead of a ul/li) could you do something like this instead?

<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>

这篇关于IE7：如何使TD浮动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！