完全相同的按鈕元素和錨鏈接

Question

我在編輯錨鏈接旁邊的表單元素中有一個刪除按鈕。在HTML代碼如下所示：

<button type="submit">Delete</button> 
<a href="#" class="button">Edit</a> 

我已經使用了下面的CSS樣式這些所謂的外觀相同：

/* From html5reset.org */ 

a { 
    margin: 0; 
    padding: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
} 

/* Custom*/ 

a { 
    text-decoration: none; 
    color: #EB8E0B; 
} 

a.button { 
    display: inline-block; 
    padding: 9px 15px; 
    background: #617798; 
    border: 0; 
    font: normal 18px/100% Arial, Helvetica, sans-serif; 
    color: #FFF; 
} 

/* From html5reset.org */ 

button, input, select, textarea { 
    margin: 0; 
} 

button { 
    width: auto; 
    overflow: visible; 
} 

/* Custom */ 

button[type=submit], 
button[type=button] { 
    width: auto; 
    padding: 9px 15px; 
    background: #617798; 
    border: 0; 
    font: normal 18px/100% Arial, Helvetica, sans-serif; 
    color: #FFF; 
} 

這正確呈現在IE，Safari瀏覽器，Chrome，但不能在Firefox。在Firefox中，按鈕元素的高度大於錨點鏈接。

任何想法如何解決這個問題？

Answer 1

Firefox沒有什麼怪異按鈕元素，你可以添加以下：

button::-moz-focus-inner { 
    padding:0; 
    border:0; 
}