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元素插入div是一个很好的解决方案（在您的位置我也会选择它），但是如果您想要同时显示两个button元素在没有div帮助的情况下，您可以在.item课程中尝试使用空格：

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

Width缩减为46%，以便在每个margin元素周围1% button。你现在之间有一个空格，如果你调整窗口大小，第二个button元素也不会落在第一个元素之下。

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

希望它有所帮助。

编辑：似乎border-spacing（事实上block样式中没有一个样式正常工作）不适用于button或input。但它确实与其他内联元素一起使用，例如span，h1或b。因此，对于input和button，无法正确应用display: table-cell属性（我已更改width和button的{​​{1}}值它显示，虽然input和span b实际上仍为50％）。

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