谷歌瀏覽器中的邊距崩潰與其他瀏覽器不同於<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; 
}