css - 谷歌浏览器中的边距折叠与 <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；边距:1px；填充:1px；边框:1px 纯白色；

有什么想法吗？

Answer 1

丢弃负边距，将宽度/高度移动到.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;
}