Неожиданное поведение блочной модели во всех современных браузерах для <table> - PullRequest
7 голосов
/ 13 января 2010

Ниже приведен справочный HTML-документ, иллюстрирующий мою проблему:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Box model test</title>
        <style type="text/css">
            html,body { margin:0; padding:0; background-color:#808080;}
            #box { position:absolute; top:20px; left:20px; background-color:Green; }
            #tbl { position:absolute; top:20px; left:40px; background-color:Red; }
            .common { width:20px; height:30px; border-bottom:solid 1px black; }
        </style>
    </head>
    <body>
        <div id="box" class="common"></div>
        <table id="tbl" class="common"></table>
    </body>
</html>

Сочетание типа документа HTML5 и метатега X-UA-Compatible должно переключить любой современный браузер в режим, наиболее совместимый со стандартами. Документ содержит два абсолютно позиционированных элемента: <div> и <table>. Они расположены бок о бок, с одинаковой шириной, высотой и границей CSS. Неожиданно все браузеры, с которыми я тестировал, отображают документ следующим образом:

альтернативный текст http://img204.imageshack.us/img204/853/screen1tu.png

<div> (зеленый) соответствует модели бокса. Область содержимого имеет высоту 30 пикселей (зеленые пиксели) и 1 пиксель границы снизу (общая высота составляет 31 пиксель, инструкция высоты CSS интерпретировалась как «не включая границу»).

<table>, однако, отображается с областью содержимого высотой 29 пикселей (красные пиксели) с 1 пикселем границы снизу (общая высота составляет 30 пикселей, поэтому в этом случае высота CSS интерпретировалась как «включая границу») .

Мой вопрос: почему существуют исключения для блочной модели (высота элемента не должна включать границу, но она явно относится к <table>)? Это задокументировано в спецификации W3C? Могу ли я рассчитывать на это поведение в будущем?

PS : я тестировал эту страницу с IE 7, IE 8, Opera 10.10, Safari 4.0.4, Chrome 3.0, Firefox 3.5, причем все документы были одинаковыми (на Win7 x64). 1022 *

Ответы [ 4 ]

2 голосов
/ 14 января 2010

Очень любопытно. Я могу заставить их вести себя одинаково, но только включив в таблицу <tr> и <td> и установив для них оба значения border-collapse: collapse и display: table, как вы можете видеть здесь: *

http://jsbin.com/ijila

Это не решение как таковое, но оно может помочь пролить свет на него.

2 голосов
/ 14 января 2010

Я вижу похожие проблемы при определении высоты ячейки, и, безусловно, кажется, что таблица использует модель рамки, а не блока содержимого. Я сильно подозреваю, но на данный момент у меня нет доказательств, подтверждающих это, чтобы сохранить совместимость с макетом на основе таблиц. Например, если вы установите ширину 100% и границу или поле, у вас будут проблемы с прокруткой (при условии, что ваша таблица занимает все окно).

Это на самом деле является преимуществом модели рамки с рамками, так как трудно достичь 100% -100px с рамкой с содержимым, но здесь это тривиально. К счастью, с помощью CSS3 мы можем выбрать использование рамки для элементов уровня блока, что, возможно, должно было быть в первую очередь. Я помню, как однажды услышал, что IE5 реализовал рамку границ, поскольку это было в спецификации daft, которая затем изменилась.

Внимательное прочтение спецификации CSS относительно макета таблицы, вероятно, подтвердит, если это так.

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что если я получаю ячейку высотой 200px, границей 10px и отступом 20px, а затем использую getCalculatedStyle (), браузер сообщает, что он имеет высоту 140px! Несмотря на то, что я специально установил высоту в 200 пикселей.

С уважением, Allan

0 голосов
/ 24 ноября 2010

Не ответ, только мои два цента:

У меня были некоторые проблемы при использовании display: table для div. Он работает немного иначе, чем div, в частности, включения границ. Я немного поболтал об этом здесь:

Div в Chrome

0 голосов
/ 13 января 2010

Добавьте border-collapse: collapse к #tbl css. У вас все еще есть заполнение ячеек.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...