"display table-cell" con diverse altezze su diversi tag

Question

Prima di tutto, sto usando Google Chrome 34 su Mac.

Questa è la HTML, tutto sembra giusto:

<div class="toolbar"> 
    <button type="button" class="item">Item 1</button> 
    <button type="button" class="item">Item 2</button> 

    <div class="item">Item 3</div> 
    <div class="item">Item 4</div> 
</div> 

E questo è il mio CSS ... (ok, è SCSS):

.toolbar { 
    border: 1px solid #000; 
    border-width: 1px 0; 
    display: table; 
    width: 100%; 

    .item { 
    background: transparent; 
    border: 1px solid #000; 
    border-width: 0 1px 0 0; 
    display: table-cell; 
    height: 40px; /* <---------- */ 
    outline: none; 
    vertical-align: center; 
    white-space: nowrap; 

    &:last-child { border-right: 0; } 
    } 
} 

Puoi vedere questi codici in azione su http://codepen.io/caio/pen/yFzvK.

Il mistero è che punto 1 e 2 (button tag) assumere la giusta altezza (40px), ma gli elementi 3 e 4 (div tag) assumere una maggiore altezza (50px).

Inoltre, gli elementi misteriosamente con il tag div sono allineati correttamente.

Potete aiutarmi a capire perché questo accade? E come posso ripararlo?

Answer 1

Ho trovato la soluzione. Si prega di utilizzare il codice sottostante. Qui è JSFiddle Trial

SCSS

body { 
    padding: 50px; 
} 

.toolbar { 
    border: 1px solid #000; 
    border-width: 1px 0; 
    display: table; 
    width: 100%; 
    button,div{-moz-box-sizing: border-box;} 

    .item { 
    background: transparent; 
    border: 1px solid #000; 
    border-width: 0 1px 0 0; 
    display: table-cell; 
    vertical-align: center; 
    white-space: nowrap; 

    &:last-child { border-right: 0; } 

    button{ 
    height:40px; 
    outline: none; 
    padding:0; 
    margin:0; 
    width:100%; 

    } 
    } 

} 

HTML

<div class="toolbar"> 
    <div class="item"><button type="button">Item 1</button></div> 
    <div class="item"><button type="button">Item 2</button></div> 

    <div class="item">Item 3</div> 
    <div class="item">Item 4</div> 
</div>