IE7: Как сделать TD float?

Question

Я хочу набор <td> s, чтобы поплыть влево в 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> 

Это работает в IE8 и Firefox, но не в IE7. Что я делаю не так?

Режим рендеринга страницы «IE7 (Quirks)» или «IE7 (стандарты)». Я пытаюсь с IE8, правда, полагая, что режим рендеринга IE7 - это то, что он говорит. «IE8 Compatibility View» также не работает, только «Стандарты IE8» понимают это правильно.

Answer 1

Я не думаю, что это возможно так, как вы хотите.

Когда вы применяете float к элементам td [в FF/IE8 [они становятся анонимными объектами таблицы в соответствии со спецификацией CSS 2.1. По сути, они больше не являются ячейками таблицы, и эти анонимные объекты имеют тип отображения, который плавает.

IE7 не следует этой части спецификации, по сути, тип отображения ячеек не может быть изменен вообще, а объекты с типом отображения таблицы-ячейки не могут быть размещены.

Если вам абсолютно необходимо использовать таблицу (вместо 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 и ниже имеют более строгие модели таблиц и не позволяют изменять поток элементов таблицы.