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

Tengo los siguientes

Div

Como puede ver en este jsFiddle , ¿Por qué el elemento de botón 1px es más corto que el rest? En Chrome y Firefox.

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

div e input ambos usan el content-box donde el button -como usa border-box

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

Puede agregar box-sizing: content-box; , -moz-box-sizing: content-box; , -ms-box-sizing: content-box;

a la CSS para forzarlo a usar el método de la caja de contenido para calcular las dimensiones.

Editar – Más información : ¿Por qué Firefox usa el modelo de cuadro de IE para los elementos de entrada?