2013-05-25 12 views

risposta

14

È necessario conciliare il padding e line-height. Con box-sizing: border-box, stanno essenzialmente combattendo per lo stesso immobile.

In altre parole, si sta dicendo "misura 50px di altezza della linea in 50px di spazio verticale totale, ma anche di 20px".

Una soluzione semplice è ridurre line-height in modo che padding * 2 + line-height = 50px. Oppure, se vuoi più line-height, riduci il padding. Se si desidera mantenere la stessa imbottitura line-heighte, aumentare l'altezza a 70 px.

Esempio: http://jsfiddle.net/D7v2Y/11/

input { 
    display: block; 
    box-sizing: border-box; 
    line-height: 30px; 
    height: 50px; 
    padding: 10px; 
} 
+1

hai pubblicato lo stesso codice esatto di OP. Non dovrebbe essere 'line-height: 30px;' secondo le tue osservazioni? – ProblemsOfSumit

+1

Sumit, buona cattura, grazie. –

+1

Questa risposta è stata molto, molto utile. Comprendere la relazione tra altezza della linea e padding + margine mi ha permesso di correggere in 2 minuti ciò che non riuscivo a risolvere in 2 ore. – user1205577

-2

l'imbottitura si sta rompendo in IE8, Dio solo sa perché ....

è sufficiente rimuovere l'imbottitura

2

ho aggiunto un font-size e che sembrano fare il trucco:

input { 
    display: block; 
    box-sizing: border-box; 
    line-height: 1.0; 
    font-size: 20px; 
    height: 50px; 
    padding: 10px; 
} 

un po 'strano ... ma sembra essere un modo di fare esso.

Fiddle: http://jsfiddle.net/audetwebdesign/Y2rd4/

Box Dimensionamento

ho notato che la proprietà box-sizing calcola una diversa altezza in IE10/9 rispetto a Firefox. Se si omette tale proprietà, il campo di input viene visualizzato in modo più simile.

Problemi correlati