css - 相同的按钮元素和 anchor 链接

Question

我在编辑 anchor 链接旁边的表单元素内有一个删除按钮。 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 中，按钮元素的高度大于 anchor 链接。

有什么想法可以解决这个问题吗？

Answer 1

Firefox 对按钮元素做了一些奇怪的事情，尝试添加以下内容:

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