Вопрос по css – IE7: Как заставить TD плавать?

3

Я хочу набор<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>

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

Режим рендеринга страницы - «IE7 (Причуды)» или "IE7 (Стандарты)". Тем не менее, я пытаюсь использовать IE8, полагая, что режим рендеринга IE7 - это то, что он говорит. & quot; Просмотр совместимости IE8 & quot; также происходит сбой, только «Стандарты IE8» получает это правильно.

Ваш Ответ

2   ответа
4

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

Когда вы применяете 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>
Я ожидал этого результата. Спасибо, это объясняет, почему все мои попытки заставить эту работу в IE7 потерпели неудачу. Я думаю, что тогда я пойду с подходом ul / li или span / div. Tomalak
0

Мое лучшее предположение: IE7 и ниже имеют более строгие модели таблиц и не позволяют вам изменять последовательность элементов таблицы.

Похожие вопросы