在不同标签上使用"display table-cell"且高度不同

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 标签）假定更大的高度（ 50px ）。

此外，带有 div 标签的元素神秘地右对齐。

你能帮我理解为什么会发生这种情况吗？以及如何解决它？

- Caio Tarifa

---

你必须设置固定高度吗？这样做不利于实现响应式布局... - Ayman Safadi

@AymanSafadi，你有什么建议吗？ - Caio Tarifa

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>

- Lasitha Benaragama