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

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