Why is the height calculation so inconsistent in Gecko and Blink when working with elements of the built-in block?

Question

As you can see below, both Gecko and Blink perform inconsistent height calculations for different elements of the inline block, although they all have the same css class. It seems that ^{(* pause *)} Trident is the only linking mechanism to get it right.

I forgot (re) set the property?

Also, as you can see in this fiddle , if I change the indent from .3em to 1em Blinks as expected. All elements have the same height. However, Gekko is still "broken."

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

---

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

---

Gecko (Firefox v. 39.0)

---

Blinking (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), this is related to the ::moz-focus-inner borders for form elements. If you notice, the form elements ( input and button ) are always 2px wider and higher than other elements.

To solve this problem, 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; } 

Negative fields are necessary for the font to display "correctly" in the line-height. You may need to adjust the values ​​according to your line height, but these values ​​basically work fine.

For Blink (Chrome), the elements are actually the same size, but the only problem is that they are “misaligned”. You will notice that sometimes form elements appear slightly lower than the others in the inline-block setting. To solve this problem, just make sure that they all use the same vertical alignment, for example:

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

It is always useful to declare the two properties above together - if you specify an inline block, always remember to specify vertical alignment to prevent shifting.