CSS: il pulsante Invia sembra più piccolo dell'input di testo e dell'area di testo

Question

Ho appena notato questo strano rendering di una forma molto semplice.

Ecco il mio markup/CSS: http://jsfiddle.net/a9PLM/

Come si può vedere, i campi di testo e la quota tasto gli stessi stili ma la loro dimensione è molto diversa.

Perché succede?

Grazie!

Answer 1

Questo perché il modello di box in uso è diverso per <input type="submit"> e <input type="text">/<textarea>. È possibile effettuare i modelli contenitore stesso specificandole con i CSS:

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

Si può leggere di più su modelli contenitore qui: http://www.quirksmode.org/css/box.html

Ho modificato il tuo jsFiddle per vederlo lavorare: jsFiddle demo

Answer 2

La spaziatura sui campi di testo gli conferisce maggiore spazio sui lati. Imposta la spaziatura di input e aree di testo su 0.

Answer 3

Penso che questo sia un problema di rendering del browser ... con i pulsanti visualizzati in modo diverso rispetto agli input di testo.

Per risolvere, aggiungere questo al tuo css

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

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

Answer 4

Il problema è che le parti di forma sono in genere non fusi come normali elementi HTML, e styling è sempre un bit hit-or-miss. Vorrei cercare di evitare un caso come questo che richiede il dimensionamento esatto, ma se non è possibile, quindi dividere i selettori come questo:

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

Nota che ho aggiunto 20 px (10 x 2) per la larghezza a compensare l'imbottitura.

Answer 5

I Ho usato questa soluzione solo CSS che funziona in IE, FF e Chrome. Fondamentalmente, l'idea è di forzare manualmente l'altezza degli elementi di input su valori maggiori rispetto alle scatole standard. Fate questo per il testo e pulsante:

• Impostare i margini e padding a 0.
• Set vertical-align al centro.
• Usa altezza/larghezza per controllare il testo e le dimensioni dei pulsanti. L'altezza del testo deve essere di diversi pixel maggiore dell'altezza del font (per sostituire le dimensioni standard della casella). L'altezza del pulsante deve essere maggiore di 2 pixel rispetto al testo.

Esempio:

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