CSS div с отображением: ячейка таблицы и размер ячейки: border-box - несоответствие в расчете ширины / высоты

Question

Использование последней версии Google Chrome:

На странице только с этим внутренним телом:

<div class="personicon"></div>

и следующий CSS:

.personicon {
    display:table-cell;
    width:100px;
    height:100px;
    background-color:#ECECEC;
    border:1px solid #BBBBBB;

    box-sizing:border-box;
}

Фактические внешние размеры (включая границу): 100px на 102px (ожидаемые: 100px на 100px)

Без определения размера рамки: границы, внешние размеры составляют 102 на 102 пикселя (как и ожидалось).

Почему размер рамки: рамка-рамка применяется только к ширине, а не к высоте?

Спасибо: -)

Answer 1

Решение, которое я нашел для большинства браузеров, состоит в том, чтобы избегать добавления границ для отображения: отображаемых элементов ячейки таблицы: таблица && table-layout: исправленоЕсли нужна граница, поместите ее в обычный div (display: block), который находится внутри ячейки таблицы.

Answer 2

Декларация box-sizing может переключать блочные модели.Когда вы добавляете border-box, размеры ящиков будут содержать границы.Внешние размеры будут 102px на 102px (включая границу).

Когда вы используете display:table-cell;, высота будет разрешать декларации height и width, она будет рисоваться как прямоугольник 102px на 102pxвсе же.

Но на самом деле, только в IE firefox и -webkit будут рисовать 100px на 102px, потому что MS форматирует ячейку таблицы как элемент уровня блока, а firefox и -webkit -height позволит высоту строки, если ее нет, то разрешит рисовать height, который вы определили (включая границу).

Answer 3

В соответствии с W3C , элементы с display: table-cell помещаются в «анонимный» элемент таблицы, поэтому вы, вероятно, получите пространство ячеек этой таблицы в качестве дополнительного.