Ячейка таблицы и граница отображаются по-разному в IE / Chrome и Firefox / Opera

StackOverflow https://stackoverflow.com/questions/701332

  •  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, но вы можете попробовать.Не уверен, есть ли какие-либо побочные эффекты при изменении режима блокировки дисплея, но это действительно решает проблему.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top