IE7: Wie TD Schwimmer machen?

Question

Ich möchte eine Reihe von <td>s in IE7 schweben gelassen. Sie sollten auf die nächste Zeile brechen, wenn das Fenster zu klein ist.

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>

Das funktioniert in IE8 und Firefox, aber nicht in IE7. Was mache ich falsch?

Seite Rendering-Modus ist "IE7 (Quirks)" oder "IE7 (Standards)". Ich versuche, mit IE8, obwohl, im Vertrauen, dass IE7 Rendering-Modus ist, was es sagt. "IE8 Compatibility View" ist es auch, nur "IE8 Standards" bekommt Recht versagt.

Answer 1

Ich glaube nicht, das ist möglich, wie Sie wollen.

Wenn Sie den Schwimmer gelten Elemente td [in FF / IE8 [sie werden anonyme Tabellenobjekte gemäß der CSS 2.1-Spezifikation. Im Wesentlichen sind sie nicht mehr Tabellenzellen, und diese anonymen Objekte haben einen Anzeigetyp, die schwimmfähig ist.

IE7 folgt nicht diesem Teil der Spezifikation, in der Tat, die Darstellungsart der Zellen kann überhaupt nicht verändert werden, und Objekte mit einer Anzeige Tabellentyp-Zelle kann nicht geschwommen werden.

Wenn Sie unbedingt brauchen eine Tabelle verwenden (anstelle eines ul / li) können Sie etwas tun, wie dies stattdessen?

<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

Meine beste Vermutung. IE7 und unten haben strengere Tischmodelle und erlauben Ihnen nicht, den Fluss der Tabellenelemente zu ändern