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

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

6 голосов
/ 31 марта 2009

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

<!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>

Теперь это кажется довольно простым: создайте ячейку таблицы шириной 100px и высотой 100px с рамкой 6px. Как бы просто это ни казалось, в разных браузерах это выглядит по-разному. В IE8 и Google Chrome ячейка таблицы имеет размер 112 x 112 px (100 пикселей внутри и 6 пикселей снаружи). В Firefox 3 и opera таблица имеет размер 112 x 100 пикселей (поэтому по какой-то причине граница добавляется к ширине таблицы, но не к высоте таблицы).

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

Ответы [ 3 ]

7 голосов
/ 31 марта 2009

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

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

0 голосов
/ 31 марта 2009

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

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

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

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

0 голосов
/ 31 марта 2009

Вы пробовали другие ДОКТИВА? Мне повезло с: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
...