＆＃34;显示table-cell＆＃34;在不同的标签上有不同的高度

Question

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

这是 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标签）假设更高的高度（{ {1}}）。

此外，带有50px标签的神秘元素是正确对齐的。

你能帮我理解为什么会这样吗？我该如何解决？

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>