谷歌浏览器中的边距崩溃与其他浏览器不同于元素

Question

我终于弄清楚了我的问题的原因，但我无法确定解决方案，因此需要您的帮助！谷歌浏览器中的边距崩溃与其他浏览器不同于<button>元素

我试图设计一个按钮样式，它在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; 
}