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

有什么想法吗？

- Scott Rippey

---

又是一天，又出现了一个WebKit的漏洞... - BoltClock

@BoltClock，这不是我想听到的！来吧，要有创意。 - Scott Rippey

Answer 1

去掉负的margin，将width/height移动到.button（并调整margin），使用position代替（示例）：

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

- 0b10011

---

+1 很好的回答，谢谢。然而，我不能接受它，因为我忘记提到我实际上是使用负边距来实现我想要的布局。我会相应地更新我的问题，但感谢您的正确回答。 - Scott Rippey