「display table-cell」在不同標籤上具有不同高度

Question

首先，我正在使用Google Chrome 34 on Mac。

這是HTML，一切似乎是正確的：

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

這是我CSS ......（好吧，這是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; } 
    } 
} 

你可以請參閱http://codepen.io/caio/pen/yFzvK上的這些代碼。

神祕是項目1和2（button標籤）假設正確的高度（40px），但項目3和4（div標籤）承擔更大的高度（50px）。

此外，div標籤的神祕元素是右對齊的。

你能幫我理解爲什麼會發生這種情況嗎？我該如何解決它？

Answer 1

我想出瞭解決方案。請使用下面的代碼。下面是JSFiddle試用

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>