"显示表格单元格",在不同的标签上具有不同的高度

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标签的神秘元素是对齐的.

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

Answer 1

我想出了解决办法。请使用下面的代码。这是JSFiddle试用版

社会保障体系

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

    }
  }

}

超文本标记语言

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