Chrome vs. box-sizing: рамка на дисплее: таблица

Question

Я делаю небольшую 2-х панельную разметку, используя display:table.Для интервалов (также из фонового изображения) я использую padding.Поскольку мне нужно, чтобы у детей было точное width:50% из доступного пространства (принимая во внимание отступы родителя div), я использую box-sizing:border-box.

. Это прекрасно работает в Opera, но вChrome box-sizing:border-box или даже -webkit-box-sizing:border-box тихо игнорируется.

Я сделал демонстрацию, которая показывает проблему.Два красных поля должны быть квадратными, а синее поле должно иметь ширину и высоту 200 пикселей: http://jsfiddle.net/fabb/JKECK/

Вот источник HTML:

<div id="table">
    <div id="left">
        Something on the left side
    </div>    
    <div id="right">
        Something on the right side
    </div>
</div>

И CSS:

#table {
    display: table;
    /*border-collapse: collapse;*/

    width: 200px !important;
    height: 200px !important;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;

    margin: 0;
    border: 1px solid blue; 
    padding: 60px 20px;
}

#table #left, #table #right {
    display: table-cell;

    width: 50%;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;

    margin: 0; 
    border: 1px solid red;
    padding: 0; 
}

Это ошибка в Chrome?Или я что-то не так делаю?

Answer 1

Да, ошибка Google Chrome:

Проблема №103543 - Отображение CSS: ошибка таблицы

В некоторых случаях можно решить путем добавления / удаления определенной стороны отступа (как jsfiddle в отчете об ошибке), но ваш случай может быть невозможным.

Это проще и стабильнее с использованием плавающего там, если ширина и высота известны, и вы хотите квадратные ячейки.

Примечание: Так как у таблицы есть возможностьразбить назначенный css width / height, лучше не использовать его, если это не табличная структура или вы не хотите, чтобы содержимое расширяло контейнер - так что ваш !important in width & height не работает.

Answer 2

Удалить -webkit- для браузера Chrome.