¿Por qué la altura de un elemento de botón no coincide con la de un elemento de entrada de hermano con las mismas propiedades de altura?

Question

Tengo el siguiente:

<div style="border:solid 1px gray; height:22px; line-height:22px; display:inline-block;">Div</div> 
<input style="border:solid 1px gray; height:22px; line-height:22px; vertical-align:top;" type="text"> 
<button style="border:solid 1px gray; height:22px; line-height:22px; vertical-align:top;">Button</button> 

Como se puede ver en este jsFiddle, ¿Por qué el elemento de botón 1 píxel más corto que el resto? en Chrome y Firefox.

Answer 1

Tiene que ver con la forma en que el navegador implementa el modelo de caja para esos elementos.

div y input ambos utilizan el content-box donde -como button utiliza border-box

Ver aquí para más información: http://www.quirksmode.org/css/box.html

Puedes añadir box-sizing: content-box;, -moz-box-sizing: content-box;, -ms-box-sizing: content-box;

a la CSS para forzarlo utilizar el método de cuadro de contenido para calcular las dimensiones.

Editar - Más información: Why does Firefox use the IE box model for input elements?