对于<button>元素</button>，Google Chrome中的边距折叠与其他浏览器不同

Question

我终于找到了问题的原因，但我无法确定解决方案，所以需要你的帮助！

我正在尝试设置一个按钮，它在FireFox和Internet Explorer中看起来很棒，但在Chrome中却看不到！我在这里使用负边距，但即使它们是正边际，问题仍然存在。

这是代码，简化以说明问题：

<div style="display: inline-block;">
    <span style="display: block; margin: -20px; width: 100px; height: 100px;"> div </span>
</div> <!-- DIV works the same in all browsers -->

<button style="display: inline-block;">
    <span style="display: block; margin: -20px; width: 100px; height: 100px;"> button </span>
</button> <!-- BUTTON ignores margins in Chrome only -->

这是FireFox中的预期结果：

这是我在Chrome中看到的问题：

自己动手：http://jsfiddle.net/ScottRippey/SZV45/13/

在我看来，边缘被忽略了。但是，我似乎无法禁用按钮的边距折叠！
我试过了：display: inline-block; position: absolute; margin: 1px; padding: 1px; border: 1px solid white;

有什么想法吗？

Answer 1

弃掉否定margin，将width / height移至.button（并调整为margin），然后使用position代替（example）：

<div class="button">
    <span class="inner"> div </span>
</div>

<button class="button">
    <span class="inner"> button </span>
</button>

.button {
    display: inline-block;
    background: rgba(255,0,0,0.5);
    border: none;
    padding: 0;
    margin: 20px;
    position: relative;
    width: 60px;
    height: 60px;
    vertical-align: top;
}
.inner {
    display: block;
    background: rgba(0,0,255,0.5);
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -20px;
    right: -20px;
}