的CSS - 建立一個按鈕時，在Firefox 1個PX差異

Question

你可以看到Jsfiddle

問題這是我的代碼：

CSS

.btn { 
    text-align: center; 
    color: #333; 
    font-weight: 700; 
    font-size: 11px; 
    font-family: tahoma, verdana, arial, helvetica; 
    background: -webkit-linear-gradient(#fefefe, #e7e7e7); 
    background: -o-linear-gradient(#fefefe, #e7e7e7); 
    background: -moz-linear-gradient(#fefefe, #e7e7e7); 
    background: linear-gradient(#fefefe, #e7e7e7); 
    height: 24px; 
    width: auto; 
    overflow: visible; 
    border: 1px solid #c4c4c4; 
    padding: 0 10px; 
    line-height: 22px; 
    border-radius: 3px; 
} 
.btn:hover { 
    color: #111; 
    border: 1px solid #555; 
} 

HTML

<input type="submit" value="Submit" class="btn" /> 

這個按鈕在Chrome，Opera，MIE中看起來不錯，但不是在Firefox中。

在所有瀏覽器中，「提交」文本上方和下方的空間爲7像素和7像素。

在Firefox - 8px和6 px。

有什麼辦法可以解決這個問題在Firefox？

Answer 1

添加以下CSS重置填充和邊框屬性爲你的元素。

更新的jsfiddle：http://jsfiddle.net/r5vvac82/1/

.btn::-moz-focus-inner { 
    padding:0; 
    border:0; 
}