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

После нескольких часов разочарования я наконец обратился к Интернету за ответом. Представьте себе этот чрезвычайно простой фрагмент кода:

<!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 px (поэтому граница почему-то добавляется к ширине таблицы, а не к ее высоте).

Серьезно, что дает? И как я могу сделать этот рендеринг одинаковым в каждом браузере (и нет, я не могу использовать div, в этом случае мне нужно использовать таблицу).


html css border html-table
person Community    schedule 31.03.2009    source источник

Ответы (3)


arrow_upward
7
arrow_downward

Серьезно, что дает?

Да... высота ячеек таблицы и вертикальная граница действительно довольно плохо определены в спецификации 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». Это работает для меня.

person bobince    schedule 31.03.2009
comment
Да, это решило мою проблему. Раньше я игнорировал это решение из-за некоторых проблем с анимацией при использовании scriptaculous в другой ситуации. Хотя в данном случае это работает :) - person ; 02.04.2009

arrow_upward
0
arrow_downward

Вы пробовали другие DOCTYPE? Мне повезло с:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
person Scott Evernden    schedule 31.03.2009
comment
Я только что попытался заменить тип документа в приведенном выше коде... безуспешно. - person ; 31.03.2009

arrow_upward
0
arrow_downward

Я немного повозился с этим, и есть пара вещей, собранных вместе, которые сделали их одинаковыми для меня в IE7 и Firefox 2. Мне нужно было сделать две вещи:

а) добавить display:block; к стилю для ячейки таблицы (заставил Firefox отображать высоту ячейки так же, как это делал IE);

б) добавил в ячейку неразрывный пробел (иначе IE не отображал границы).

У меня не загружен IE8 или Firefox 3, но вы можете попробовать. Не уверен, есть ли какие-либо побочные эффекты при изменении отображения на блокировку, но это решает проблему.

person patmortech    schedule 31.03.2009
comment
«display: block» перестанет обрабатывать ячейку как ячейку таблицы в браузерах, отличных от IE, поэтому любые другие ячейки испортят макет. - person bobince; 31.03.2009
comment
Вы на самом деле это подтвердили или просто предположили? Я смотрю на него в Firefox 2, и для меня он выглядит точно так же, как и любая другая ячейка таблицы. - person patmortech; 01.04.2009
comment
nbsp требуется только для пустых ячеек таблицы в IE (в противном случае это не ячейка) - person borrel; 11.02.2011