IE7：TDをフロートさせる方法は？

StackOverflow https://stackoverflow.com/questions/1018125

  •  06-07-2019
  •  | 
  •  

質問

IE7で左にフロートする<td> sのセットが必要です。ウィンドウが小さすぎる場合、次の行に分割する必要があります。

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では機能しません。私は何を間違えていますか？

ページレンダリングモードは<！> quot; IE7（Quirks）<！> quot;または<！> quot; IE7（標準）<！> quot;。私はIE8を試していますが、IE7レンダリングモードがそれが言っていることを信頼しています。 <！> quot; IE8互換ビュー<！> quot;同様に失敗しているのは、<！> quot; IE8 Standards <！> quotのみです。正しくなります。

役に立ちましたか？

解決

これはあなたが望む方法で可能だとは思わない。

フロートを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>

他のヒント

最善の推測：IE7以下ではより厳密なテーブルモデルがあり、テーブル要素のフローを変更することはできません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top