CSS: el botón Enviar parece más pequeño que la entrada de texto y el área de texto

Question

Acabo de notar esta representación extraña de una forma muy simple.

Aquí es mi margen de beneficio/CSS: http://jsfiddle.net/a9PLM/

Como se puede ver, campos de texto y el botón de compartir los mismos estilos pero su tamaño es bastante diferente.

¿Por qué sucede esto?

Gracias!

Answer 1

Esto se debe a que el modelo de caja que se utiliza es diferente para el <input type="submit"> y el <input type="text">/<textarea>. Puede hacer que los modelos de cajas de la misma mediante la especificación de ellas con CSS:

box-sizing: border-box; 
-moz-box-sizing: border-box; 

Puede leer más sobre modelos de cajas aquí: http://www.quirksmode.org/css/box.html

edité su jsFiddle para mostrar que funcione: jsFiddle demo

Answer 2

Relleno en los campos de texto le dan espacio adicional en los lados. Establezca el relleno de entradas y áreas de texto en 0.

Answer 3

Creo que se trata de un problema de representación del navegador ... con botones que se muestran de forma diferente a las entradas de texto.

Para corregir, agregar esto a su css

form input[type="submit"]{ 
    width:273px; 
} 

Ejemplo:http://jsfiddle.net/jasongennaro/a9PLM/1/

Answer 4

El problema es que las piezas de forma general, no se rindió como elementos HTML normales, y el estilo de ellos es siempre una acertar o fallar. Me gustaría tratar de evitar un caso como éste, que requiere dimensionamiento exacto, pero si no se puede, a continuación, dividir los selectores como este:

form textarea, form input[type=text] 
    { 
     width:250px; 
     padding:10px; 
    } 
    form input[type=submit] { width: 270px } 

Tenga en cuenta que he añadido 20 píxeles (10 x 2) a la anchura de Compense el relleno.

Answer 5

I He utilizado esta solución solo CSS que funciona en IE, FF y Chrome. Básicamente, la idea es forzar manualmente la altura de los elementos de entrada a valores mayores que los cuadros estándar. Hacer esto para el texto y el botón:

• Establecer márgenes y el relleno a 0.
• Ajuste vertical-align al medio.
• Utilice altura/ancho para controlar el texto y las dimensiones de los botones. La altura del texto debe ser varios píxeles mayor que la altura de la fuente (para anular las dimensiones del cuadro estándar). La altura del botón debe ser 2 píxeles mayor que el texto.

Ejemplo:

input { margin:0; padding:0; border:solid 1px #888; vertical-align:middle; height:30px; } 
input[type="submit"] { height:32px; }