Chrome и размер окна: border-box в ди splay: table

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

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

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

Вот исходный код html:

Something on the left side

И 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? Или я что-то не так делаю?

5
задан BoltClock 1 March 2012 в 06:32
поделиться