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中，button元素的高度大于锚点链接。

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

Answer 1

Firefox对按钮元素做了一些奇怪的事情，尝试添加：

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

相同的按钮元素和锚链接

1 个答案: