使用CSS使<button>和<a>看起来一样

我想使<按钮>和<a>看起来一样。我发现了一个类似的帖子，建议添加使用CSS使<button>和<a>看起来一样

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

但是，在Firefox中查看时，它仍然有轻微的高度差异。这是jsfiddle。任何帮助？

2013-02-26 Mr. 14

不，@OneTrickPony，在Firefox中它们完全不同。 – JakeParis 2013-02-26 14:59:55

Twitter Bootstrap .btn类通过按钮，锚点和输入（type =“submit”）元素来完成此操作。我建议看看他们的代码。 – 2013-02-26 15:15:34

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

此修复中间一个，仍然在最后的输入。

UPDATE

你可以看到线高度的最后一个例子在这个例子中http://jsfiddle.net/H3HK8/24/没有效果，甚至与！重要添加。

在尝试解决这个规则时，我发现了一些让情况变得更加可怕的事情：浏览器定义！重要的规则不能被作者定义的重要规则所超越。这个规则不能被CSS文件，内联样式 - 任何东西否决。

2013-02-26 15:13:22 Chris

它似乎与[FF重写行高属性]（http://www.cssnewbie.com/input-button-line-height-bug/#.USzQkG-KLQc） – 2013-02-26 15:18:21

哈！ 40秒对我来说太快了！我正在编辑我的问题，正如你所评论的！ – Chris 2013-02-26 15:19:37

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

2013-02-26 15:00:03

我认为box-sizing定义了添加边框的方式。（即填充物的内部或外部）。如果你看看我的jsfiddle例子，按钮和链接都使用相同的样式。我错过了什么吗？ – 2013-02-26 15:06:20

回答