Я делаю небольшой макет с двумя панелями, используя 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
Something on the right 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? Или я что-то не так делаю?