Ячейка таблицы и граница отображаются по-разному в IE / Chrome и Firefox / Opera
-
22-08-2019 - |
Вопрос
После нескольких часов разочарования я, наконец, обратился к Интернету за ответом.Представьте себе этот чрезвычайно простой фрагмент кода:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>AARRRRRRGH</title>
</head>
<body>
<table>
<tr>
<td style="width: 100px; height: 100px; background: #000000; padding: 0px; border: 6px solid #FF0000;"></td>
</tr>
</table>
</body>
</html>
Теперь это кажется довольно простым, создайте ячейку таблицы шириной 100 пикселей и высотой 100 пикселей с границей 6 пикселей.Каким бы простым это ни казалось, в разных браузерах это выглядит по-разному.В IE8 и Google Chrome ячейка таблицы имеет размер 112 x 112 пикселей (таким образом, 100 пикселей внутри и 6 пикселей снаружи).В Firefox 3 и Opera размер таблицы составляет 112 x 100 пикселей (поэтому по какой-то причине граница добавляется к ширине таблицы, но не к высоте таблицы).
Серьезно, что это дает?И как я могу сделать этот рендеринг одинаковым в каждом браузере (и нет, я не могу использовать div, в этом случае мне нужно использовать таблицу).
Решение
Серьезно, что это дает?
Да...высота ячеек таблицы и вертикальная граница действительно довольно нечетко определены в спецификации CSS 2.1.Нет ничего, что полностью объясняло бы, как они взаимодействуют, и стандартная блочная модель не совсем охватывает это.Рисунок в разделе 17.6.1, где они демонстрируют определение ширины, явно не охватывает высоты.
FWIW Я не думаю, что интерпретация Mozilla / Opera имеет какой-либо смысл, но я не могу сказать, что она полностью неверна.
как я могу сделать этот рендеринг одинаковым в каждом браузере (и нет, я не могу использовать div, в этом случае мне нужно использовать таблицу).
Как насчет div внутри таблицы?
<td style="width: 100px; background: black; padding: 0; border: 6px solid red;">
<div style="height: 100px;">...</div>
</td>
Теперь ясно, к какому измерению относится ‘100px’.У меня это работает.
Другие советы
Вы пробовали другие ТИПЫ ДОКУМЕНТОВ?Мне повезло с:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Я немного повозился с этим, и есть пара вещей, собранных вместе, которые сделали их одинаковыми для меня в IE7 и Firefox 2.Две вещи, которые я должен был сделать, были:
а) добавить display:block
;к стилю ячейки таблицы (заставил Firefox отображать высоту ячейки так же, как это делал IE);
б) добавил неразрывный пробел в ячейку (в противном случае IE не отображал границы).
У меня не загружен IE8 или Firefox 3, но вы можете попробовать.Не уверен, есть ли какие-либо побочные эффекты при изменении режима блокировки дисплея, но это действительно решает проблему.