Diciamo che ho il seguente codiceHTML: è casella di immissione default/tenore calcolato in diverse altezze tutti i browser
.username {
font-size: 30px;
padding-top: 8px;
padding-bottom: 8px;
border: 2px solid #E0E0E0;
}<input class="username" type="text" />Vedi demo in diretta su http://jsbin.com/qudorugoguya/1/edit?html,css,output
Capisco che il totale altezza = altezza del contenuto + padding-top + padding-bottom + (border-width x 2).
http://www.w3.org/TR/CSS21/box.html#box-dimensions
Tuttavia, quando la proprietà height non viene assegnato un valore, sembra che l'altezza del contenuto calcolato cambia da browser a browser. Come se fosse il risultato della dimensione del font + un numero arbitrario di pixel proporzionale alla dimensione del font.
Per diversi browser content height ha i seguenti valori:
- Chrome 38: 34px
- Firefox 33: 35px
- IE 11: 34.5px
- IE 8: 35px
Nota: ho ottenuto i valori dallo strumento di sviluppo incorporato di ciascun browser
Esiste un modo per ottenere valori coerenti dal browser al browser senza impostare la proprietà height né la proprietà line-height?
Nota che il reset e il normalizzatore CSS non hanno nulla a che fare con questa domanda. Infatti, anche se in questo esempio si aggiunge un reset CSS, il comportamento è diverso, vedere da soli su http://jsbin.com/vecugikuyivo/1/edit –
I fogli di stile di ripristino/normalizzazione CSS sono _supposed_ per fornire la coerenza cross-browser in termini di layout, caratteri, dimensionamento, ecc. Tuttavia, ho provato 6 diversi finora, e mentre tutti loro riescono in varie cose, nessuno di loro funziona per questo particolare problema. Quindi, ottima domanda! Ho fatto +1 su di esso e lo ho favorito, perché mi piacerebbe vedere una risposta facendo riferimento a un foglio di stile specifico che normalizza l'altezza di quell'ingresso su tutti i browser ... –
+1 per testare i 6 diversi reset/normalizzatori –