Неправильная раскладка таблицы в IE (7)
https://stackoverflow.com/questions/197266
-
10-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Ниже приведен код простого HTML-кода с макетом таблицы.
В FF это выглядит так, как я думаю, должно выглядеть,
в IE7 это не так. что я делаю не так?
И как я могу это исправить?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<TITLE>test</TITLE>
</head>
<body>
<table id="MainTable" cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td colspan="4">
<div style='width:769; height:192;'>192
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<div style='width:383; height:100;'>100
</div>
</td>
<td rowspan="2" valign="top">
<div style='width:190; height:200;'>200
</div>
</td>
<td rowspan="2" valign="top">
<div style='width:190; height:200;'>200
</div>
</td>
</tr>
<tr>
<td valign="top" rowspan="2">
<div style='width:190; height:200;'>200
</div>
</td>
<td valign="top" rowspan="2">
<div style='width:190; height:200;'>200
</div>
</td>
</tr>
<tr>
<td valign="top">
<div style='width:190; height:100;'>100
</div>
</td>
<td valign="top" >
<div style='width:190; height:100;'>100
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div style='width:383; height:100;'>100
</div>
</td>
<td colspan="2">
<div style='width:383; height:100;'>100
</div>
</td>
</tr>
<tr>
<td>
<div style='width:190; height:100;'>100
</div>
</td>
<td>
<div style='width:190; height:100;'>100
</div>
</td>
<td colspan="2">
<div style='width:383; height:100;'>100
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Решение
Я предполагаю, что вы жалуетесь на минимальную высоту среднего ряда (содержащего только ячейки с разметкой строк) и увеличенную высоту смежных рядов, чтобы компенсировать это, оставляя промежутки между элементами.
IE не может рассчитать оптимальную высоту строки, если строка содержит только ячейки с разметкой строки. Обычное решение, когда вы абсолютно не можете перенастроить его, чтобы избавиться от интервала строк, состоит в том, чтобы добавить одну пустую колонку размером в 1 пиксель на одну сторону таблицы, содержащую пустые ячейки, каждая из которых имеет высоту, равную высоте строки.
Но да, в зависимости от того, что вы планируете делать с этим, макет CSS может быть более подходящим. Если это действительно макет с фиксированными пикселями для всего, как в этом примере, абсолютное позиционирование для каждого элемента будет намного, намного проще.
Другие биты: значения ширины / высоты CSS требуют единиц измерения (предположительно 'px'); VALIGN / CELLSPACING / и т.д.. это проще сделать в таблице стилей, даже если вы используете макеты таблиц; DOCTYPE в стандартном режиме может предотвратить некоторые из худших ошибок IE (хотя, не эту старую, не связанную с CSS).
Другие советы
Для начала, ваши значения CSS должны иметь единицы измерения, например width: 190; должно быть width: 190px;
полностью согласен, вы можете взглянуть на план CSS или другие CSS-фреймворки для некоторой помощи
На первый взгляд кажется, что в IE7 не работает поддержка такого рода форматирования. Сначала я собирался предложить избавиться от div-ов и переместить форматирование (ширину и высоту) непосредственно на TD, но я попробовал это и, похоже, не решил проблему.
Полагаю, это нехорошее решение, но можно ли заменить ячейки со строками строки на большее количество ячеек с невидимой границей между ними? Однако это решение не работает, если текст больше, чем размер верхней ячейки.
Выбор Doctype (4.01 Transitional без системного идентификатора (url)) запускает режим Quirks в IE, что делает его крайне несовместимым с другими браузерами.
Переключиться на:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">Или хотя бы:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">(и, конечно же, проверить , но HTML и CSS (который выберет недостающие единицы на ваши значения длины)).
Вы должны определенно использовать CSS. Таблицы НИКОГДА не должны использоваться для разметки.
