Extra padding in

Sembra che ogni browser aggiunga un riempimento magico con hardcoded all’interno di . Alcuni browser (IE, Safari, Chrome) rendono la casella di input un po ‘più alta, ma si allineano correttamente come se fosse un normale elemento HTML. Posso vivere con l’altezza extra. Ma alcuni browser si comportano male (Firefox e Opera) e provano anche ad allineare verticalmente il testo o ad aggiungere qualche padding extra sopra di esso. Sono sorpreso che i moderni browser non permettano di impaginare le caselle di testo come se fossero allo stesso modo dell’HTML e aggiungere un po ‘di formattazione magica. Sto facendo qualcosa di sbagliato? Mi manca qualche trucco? Sono alcune proprietà CSS proprietarie che potrebbero aiutarmi? Ho esaminato brevemente la documentazione di Firefox CSS, ma non sono riuscito a trovarne. In alternativa, potrei usare HTML modificabile invece di .

Ecco uno snippet che dimostra il problema:

    Test  body, input { font-family: sans-serif; font-size: 16pt; color: White; } #textbox { position: absolute; left: 20px; top: 20px; width: 100px; background-color: #A5C9E2; line-height: 16pt; padding: 0px; margin: 0px; border-width: 0px; } #box { position: absolute; left: 120px; top: 20px; width: 100px; background-color: #AFD66A; line-height: 16pt; }     
Hello

Modifica: Ho sperimentato un po ‘con -moz-outline e -moz-box-sizing in Firefox (per ogni evenienza), ma nessuno dei loro valori rimuove il padding extra.

È ansible eliminare questo riempimento extra cambiando il ridimensionamento della casella dell’input.

 -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; 

Rende i browser moderni si comportano allo stesso modo. Potrebbe essere necessario indirizzare specificamente IE.

Ho sperimentato cambiando i valori di altezza della linea e dimensione dei caratteri a 20px e poi ispezionando l’elemento con Firebug. Le proprietà clientHeight e offsetHeight sono entrambe di 24px (ma poiché tali proprietà includono qualsiasi padding impostato sull’elemento non sono sicuro se questo è il browser che espande l’altezza dell’elemento o aggiunge padding).

L’impostazione esplicita dell’altezza dell’input per essere uguale all’altezza della linea sembra fare ciò che si desidera, ovvero l’ line-height: 16pt; height: 16pt; line-height: 16pt; height: 16pt; – ma sospetto che funzioni agganciando l’elemento, poiché la posizione verticale del testo all’interno dell’ingresso non cambia.