display:table-cell,border-spacing不能用于按钮？

Question

所以,我正在使用display: table-cell两个按钮彼此相邻,这样如果一个文本溢出到下一行,则两个按钮的高度相同.我有border-collapse: separate并且正在使用border-spacing它们之间的空间.如果我使用类似的东西<div class="button">,它的工作正常,但是一旦我使用<button>元素,中间空间就会消失.
JSFiddle:http ://jsfiddle.net/uASbb/

现在,使用它<div>现在很好(如果不是在语义上准确),所以我大多只是好奇,如果有人知道这里到底发生了什么.
注意:我也注意到<input>在相同情况下使用元素的一些(不同的)奇怪行为:http ://jsfiddle.net/G5SFX/1/这些实例中

是否display: table-cell不支持？这是一个错误吗？

谢谢!

编辑:似乎你不能应用display: table-cell一个按钮; 它只是默认回到inline-block.从Chrome WebInspector中查看此屏幕截图:


现在问题仍然存在:这是故意的吗？它是规范还是只是浏览器？我们可以改变它吗？

Answer 1

将元素插入button到 a 中div是一个很好的解决方案（在你的地方我也会选择它），但是如果你想在button没有 a 帮助的情况下并排显示两个元素并在两者之间留有空间，div你可以在你的类中尝试这个.item：

.item {
    display: table-cell;
    width: 46%;
    background: aliceBlue;
    border: 1px solid black;
    margin: 1%;
}

Width被简化为46%允许每个元素周围都有margin一个。现在它们之间有一个空格，而且如果您调整窗口大小，第二个元素也不会落在第一个元素之下。1%buttonbutton

示例： http: //jsfiddle.net/codenighter/H7TZU/

希望能帮助到你。

编辑：似乎border-spacing（事实上没有任何block样式有效）不适用于buttonor input。但它确实可以与其他内联元素一起使用，例如span,h1或b。因此， forinput和button的属性display: table-cell无法正确应用（我已经更改了和 的width值，它显示了，而 for和 的值实际上仍为 50%）。buttoninputspanbwidth

示例： http: //jsfiddle.net/codenighter/HrTZS/