IE7：TDフロートの作り方？

Question

私は<td>のセットを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> 

これはIE7でIE8とFirefoxで動作しますが、ありません。私は間違って何をしていますか？

ページレンダリングモードが「IE7（Quirks）」または「IE7（Standards）」です。私はIE8でしようとしていますが、IE7のレンダリングモードを信じています。 "IE8 Compatibility View"も失敗していますが、 "IE8 Standards"だけが正しく動作します。

Answer 1

私はこれがあなたの望むようにはできないと思います。

フロートを[FF/IE8]のtd要素に適用すると[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以下ではテーブルモデルが厳しく、テーブル要素のフローを変更することはできません。