Estou fazendo um pequeno layout de dois painéis usandodisplay:table. Para espaçamento (também da imagem de fundo), eu usopadding. Como eu preciso que as crianças tenham uma exatawidth:50% do espaço disponível (levando em consideração o preenchimento dos paisdiv), Eu usobox-sizing:border-box.

Isso funciona bem no Opera, mas no Chrome obox-sizing:border-box ou mesmo-webkit-box-sizing:border-box é silenciosamente ignorado.

Fiz uma demonstração que mostra o problema. As duas caixas vermelhas devem ser quadradas e a caixa azul deve ter 200 px de largura e altura:http: //jsfiddle.net/fabb/JKECK

Aqui está a fonte html:

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

E o 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; 
}

Isso é um bug no Chrome? Ou estou fazendo algo errado?