"display table-cell" z różnymi wysokościami na różnych znacznikach

Question

Przede wszystkim używam Google Chrome 34 na Mac.

To HTML, wszystko wydaje się w porządku:

<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> 

A to moja CSS ... (ok, to 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; } 
    } 
} 

Można zobacz te kody w akcji na http://codepen.io/caio/pen/yFzvK.

Tajemnica że pozycja 1 i 2 (button Tag) przyjąć właściwą wysokość (40px), a pozycje 3 i 4 (div Tag) przyjąć większą wysokość (50px).

Co więcej, tajemniczo elementy z tagiem div są wyrównane do prawej.

Czy możesz mi pomóc zrozumieć, dlaczego tak się dzieje? I jak mogę to naprawić?

Answer 1

Wymyśliłem rozwiązanie. Użyj poniższego kodu. Tutaj jest 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>