显示：表格单元格，边框间距不适用于按钮？答案

【问题标题】：display: table-cell, border-spacing don't work with buttons?显示：表格单元格，边框间距不适用于按钮？
【发布时间】：2012-09-07 00:45:30
【问题描述】：

所以，我使用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 的此屏幕截图：

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

【问题讨论】：

有趣...而且没有必要拥有width:50%，但使用按钮也不起作用。比较：jsfiddle.net/uASbb/1
我不知道它是否是标签“按钮”的错误，但如果在 firebug 的“DOM”中看到，我们会得到下一个：对于标签“按钮”offsetLeft = 0，对于标签“div” offsetLeft = 15...
不是一个很好的解决方案，但需要考虑的是在按钮内嵌套一个 div 或 span。
是的，我最终做的是有一个外部<div> 来处理间距和一个内部<button> 在语义上是正确的。它不像我想要的那样优雅，但是，这就是网页设计。
在使用 Opera 12 时效果很好（但在 Firefox 的 Chromium 中不行），所以我猜这是某种浏览器错误。但另一方面——你真的需要将按钮格式化为表格单元格吗？浮点数或display: inline-block; 怎么样？

标签： html css button input css-tables

【解决方案1】：

将button 元素插入div 是一个很好的解决方案（在你的位置，我也会选择它），但是如果你想并排显示两个button 元素并在中间没有空格来自div 的帮助，您可以在.item 课程中试试这个：

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

Width 减少到 46% 以允许在每个 button 元素周围有一个 margin 或 1%。您现在在它们之间有一个空格，而且如果您调整窗口大小，第二个 button 元素将不会落在第一个元素之下。

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

希望对你有帮助。

编辑：似乎border-spacing（实际上block 样式都不起作用）不适用于button 或input。但它确实适用于其他内联元素，如 span、h1 或 b。因此，对于input 和button，无法正确应用display: table-cell 属性（我已经更改了button 和input 的width 值并且它显示了，而对于span 和@ 987654349@ width 实际上保持在 50%）。

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

【讨论】：

第一个示例至少在右侧留给我更大的空间。
添加具有明确定义的类的额外元素层以允许更好的样式在 IMO 中是一种很好的做法，尽管在 2012 年（当时情况更糟）有点不赞成。如今，由于第三方库的使用如此之多，因此必须具有灵活性。没有什么比处理无法修改的标记更糟糕的了（死亡和税收除外）。