IE7:Как заставить TD плавать?
-
06-07-2019 - |
Вопрос
Я хочу набор <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 (Причуды)" или "IE7 (стандарты)".Однако я пробую с IE8, полагая, что режим рендеринга IE7 - это то, что он говорит."Представление совместимости IE8" также не работает, только "Стандарты IE8" исправляют это.
Решение
Я не думаю, что это возможно так, как вы хотите.
Когда вы применяете значение 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 и ниже имеют более строгие модели таблиц и не позволяют изменять поток элементов таблицы.