Why is the height calculation so inconsistent in Gecko and Blink when dealing with inline-block elements?

Question

As you can see below, both Gecko and Blink performs an inconsistent height calculation for different inline-block elements, even though they all have the same css class. It seems like ^(*pause*) Trident is the only layout engine to get it right.

Did I forget to (re)set a property?

Furthermore, as you can see in this fiddle, if I change the padding from .3em to 1em Blink renders as expected. All elements gets the same height. Gecko is still "broken" though.

Does anyone know why this is happening and how to fix it?

---

<a> <button> <input> <span>

---

Gecko (Firefox v. 39.0)

---

Blink (Google Chrome v. 43.0.2357.132 m):

---

Trident (Internet Explorer v. 11.0.9600.17843):

---

body {
    font: normal 15px arial;
    padding: 1em;
}

.button {
    background: #444444;
    border: none;
    box-sizing: content-box;
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-size: 1em;
    height: auto;
    line-height: normal;
    margin: 0;
    min-height: 1em;
    padding: .3em;
    text-decoration: none;
}

<a class="button" href="#">button</a><button class="button">button</button><input class="button" type="button" value="button" /><span class="button">button</span>

Answer 1

For Gecko (Firefox), it is due to borders on ::moz-focus-inner for form elements. If you notice, the form elements (input and button) are always ~2px wider and taller than other elements.

To solve it, always add this to your CSS (as part of your reset):

button::-moz-focus-inner{
    border:0;
    padding:0;
    margin-top:-2px;
    margin-bottom:-2px;
}
input::-moz-focus-inner{
    border:0;
    padding:0;
    margin-top:-2px;
    margin-bottom:-2px;
}

The negative margins are necessary so that the font displays "correctly" in the line-height. You may need to tweak the values to fit your line-height, but these values mostly work fine.

For Blink (Chrome), the elements are actually the same size, but the only issue is that they are "mis-aligned". You'll notice that sometimes the form elements display slightly lower than the others in an inline-block setting. To solve it, simply ensure that they all use the same vertical alignment, e.g.:

display: inline-block;
vertical-align: top;

It is always a good practice to declare the two properties above together - if you specify inline-block, always remember to specify the vertical alignment, in order to prevent misalignment.