Use CSS to make <button> and <a> look the same

Question

I'd like to make <button> and <a> to look the same. I've found a similar post that suggests adding

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

However, it still has a slight height difference when viewed in Firefox. Here's the jsfiddle. Any help?

Answer 1

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

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

This fixes the middle one, still working on the final input.

From here http://www.aheadcreative.com/removing-unwanted-button-padding-in-firefox/

UPDATE

I suspect for the final example you are falling victim to this http://www.cssnewbie.com/input-button-line-height-bug/#.USzRd6Wcmzc

You can see the line height has no effect in this example http://jsfiddle.net/H3HK8/24/, even with !important added.

And while trying to work around this rule, I discovered something that makes the situation a little more dire: browser-defined !important rules cannot be over-ruled by author-defined !important rules. This rule cannot be overruled by a CSS file, an inline style — anything.