使用CSS制作<button>和<a> look the same</a> </button>

Question

我想制作＆lt; button＆gt;和＆lt; a＆gt;看起来一样。我发现了一个类似的帖子，建议添加

box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;

但是，在Firefox中查看时，它的高度差异仍然很小。这是jsfiddle。有什么帮助吗？

Answer 1

http://jsfiddle.net/H3HK8/22/

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

这解决了中间问题，仍在处理最终输入。

从这里http://www.aheadcreative.com/removing-unwanted-button-padding-in-firefox/

<强>更新

我怀疑最后的例子你是这个http://www.cssnewbie.com/input-button-line-height-bug/#.USzRd6Wcmzc

的受害者

您可以在此示例http://jsfiddle.net/H3HK8/24/中看到行高无效，即使添加了！important。

  

在尝试解决这个规则的同时，我发现了一些使情况更加可怕的东西：浏览器定义的重要规则不能被作者定义的重要规则所覆盖。这个规则不能被CSS文件推翻，这是一种内联样式 - 任何东西。

Answer 2

您应该确保所有CSS属性都相同。所以不仅是盒子大小（本身并没有真正做任何事情），还有填充，边距，行高，字体大小，背景等。