How to normalize a button and an anchor with CSS?

Question

Check out this code sample of a button and an anchor: http://jsbin.com/ecitex/2/edit

I'm trying to make them identical in all browsers. But differences remain, and different differences in every browser (tried Chrome, Safari, Firefox, IE8).

Which CSS normalizations am I missing?

---

Update: Per suggested:

• I added line-height: 50px (although my user agent's (Chrome's) default line-height for button elements is normal, and still it vertically centers text – how?!)
• I added cursor: pointer to normalize mouse cursors.

http://jsbin.com/ecitex/11/edit

So, now check out the result in Firefox: notice the padding on the button? Then check out the result in IE8: whoa, notice how the two are completely and utterly different?!

---

Update 2:

It seems that IE's problems are known and non-resolvable: http://www.quirksmode.org/css/tests/mozie_button2.html

I haven't found anything on Firefox's padding though. (The quirksmode article mentions an issue with Mozilla, but that's a different issue.)

---

Update 3:

Awesome, we fixed the Firefox issue: http://jsbin.com/ecitex/15/edit

Okay, so far every single answer has been providing part of the solution so there's not really one single best answer. I'll grant the best answer to the person that either:

• Explains why we have to specify a line-height: 50px to vertically center text in an a, while a button has vertically centered text with a mere line-height: normal.
• Provides a solution for the IE issue.

Answer 1

You can remove that extra padding in Firefox by using:

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

Here's a good explanation from Eric Meyer about line height which hopefully explains why you need to explicitly set it as 50px: http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/.

Here's some new CSS that fixes the font size issue in IE:

button, a {
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 10px 0;
  padding: 0px;
  height: 50px;
  border-width: 0;
  background-color: Red;
  color: White;
  font-family: sans-serif;
  font-weight: normal;
  font-size: inherit;
  text-decoration: none;
  line-height: 50px;
  cursor: pointer;
  font-size: 100%;
}
button {
  #width:0px;
  overflow: visible;
}
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

Answer 2

You need to use line-height property to bring your anchor tag text vertically centered

Demo

CSS

button, a {
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 10px 0;
  padding: 0;
  height: 50px;
  border-width: 0;
  background-color: Red;
  color: White;
  font-family: sans-serif;
  font-weight: normal;
  font-size: inherit;
  text-decoration: none;
  line-height: 50px; <-------- Here
}

Answer 3

add the attribute cursor:pointer; in order to add a pointer when the mouse is hover (the input not always have it)

and at last use line-height:46px; for the vertical align

the full code is here -> http://jsbin.com/ecitex/10/edit