Firefox按钮CSS问题

Question

JSFIDDLE 我正在尝试为CSS中的按钮编写样式。 css代码：

.btn{
    border: solid 1px rgba(210, 210, 210, 0.69);
    outline: none;
    color: black;
    background-color: #E8E8E8;
    font-family: Verdana, sans-serif;
    cursor: pointer;
    margin: 2px;
    display: inline-block;
    text-indent: 0;
    font-style: normal;
    font-size: 12px;
    padding: 3px 7px;
}

这适用于输入标签和标签

<input type='submit' class='btn'>
<button class='btn'>Submit</button>

问题在于标签

<a href='#' class='btn'>Submit</a>

在chrome和safari中，它运行良好，但在Firefox中，大小调整已关闭，我该如何解决这个问题？

Answer 1

这是一个应该有帮助的JSBin：http://jsbin.com/gujetoze/1/edit?css,output

由于问题仅发生在FireFox中，因此应使用FF的查询选择器，并增加填充。我也删除了文字装饰，但这取决于你。

@-moz-document url-prefix() { 
  a.btn {
     padding: 4px 7px
  }
}

Answer 2

尝试将此添加到您的css：

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