Modello di casella incoerente tra <input type = "submit" /> e <input type = "text" />

Question

Mi sono reso conto che <input type="submit"/> ha un modello di box border-box, mentre <input type="text"/> ha un modello di box content-box. Questo comportamento è presente in IE8 e FF. Purtroppo, questo mi impedisce di applicare questo stile per gli ingressi di belle dimensioni uguali:

input, textarea 
{ 
    border: 5px solid #808080; 
    padding:0px; 
    background-color:#C0C0C0; 
    width:20em; 
} 

È questo il comportamento corretto da IE e FF? E c'è un modo cross-browser per risolvere questo problema?

Answer 1

È questo comportamento corretto da IE e FF?

Non è proprio indicato nello standard come le decorazioni del campo di forma siano controllate dai CSS. Inizialmente sono stati implementati come widget del sistema operativo, nel qual caso il dimensionamento delle borderbox avrebbe avuto senso. Più tardi i browser sono migrati al rendering dei widget stessi usando i bordi CSS/padding/etc., Nel qual caso il dimensionamento della content-box avrebbe avuto senso. Alcuni browser (IE) rendono i campi del modulo come un mix di entrambi, il che significa che puoi finire con caselle selezionate non allineate con campi di testo.

E c'è un modo cross-browser per risolvere questo problema?

Circa il meglio che puoi fare è dire al browser che si desidera dimensionamento manualmente con CSS3:

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

(non funziona su IE6/7, o IE8 quando nel peculiarità o modalità di compatibilità.)

Answer 2

Hai due opzioni per risolvere questo problema 1) se si scrive il codice CSS per l'input, esso si applica per ogni ingresso element.Instead di utilizzare questo per Evert uno di loro, basta fare per tipi specifici

 
input[type="submit"],input[type="text"] 
{ 
    border: 5px solid #808080; 
    padding:0px; 
    background-color:#C0C0C0; 
    width:20em; 
} 

2) Uso sempre le dichiarazioni di classe dopo aver resettato i nomi dei tag noti.

 
.MySubmit 
{ 
    border: 5px solid #808080; 
    padding:0px; 
    background-color:#C0C0C0; 
    width:20em; 
} 

e utilizzarlo come

<input type="submit" class="MySubmit" /> 

Spero che questo aiuta.

Answer 3

C'è un css correzione solo per la

div.search input[type="text"] { width: 110px; margin: 0; background-position: 0px -7px; text-indent:0; padding:0 15px 0 15px; } 
/*ie9*/ div.search input[type="text"] { border-left: 25px solid transparent; } 
/*ie8*/ div.search input[type="text"] { border-left: 25px solid transparent; background-position-x: -16px; padding-left: 0px; line-height: 2.5em;} 

Grazie Muhammad Atif Chughtai

Answer 4

Ho usato questa soluzione CSS per ottenere altezze di pulsante e testo identiche; funziona in IE, FF e Chrome. Fondamentalmente, l'idea è di forzare l'altezza degli elementi di input su un valore maggiore rispetto all'altezza della casella predefinita. Fallo sia per il testo che per il pulsante:

• Imposta i margini e il padding su 0. Questo dà la più piccola casella "naturale" possibile.
• Imposta l'allineamento verticale al centro. Questo compensa padding = 0 per ottenere spazi bianchi sopra/sotto il testo.
• Usa altezza/larghezza per controllare le dimensioni del testo e del pulsante. L'altezza del testo deve essere di diversi pixel superiore all'altezza del font (per sovrascrivere le dimensioni predefinite della casella).L'altezza del pulsante deve essere maggiore di 2 pixel rispetto al testo (a causa delle differenze tra i modelli di testo e di pulsanti).

Esempio:

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