Fix altezza input su Firefox

Se in Firefox affianchiamo un'ancora e un submit stilizzati come pulsanti noteremo che il campo input risulta più alto dell'elemento "a". Vediamo come risolvere.
Fix altezza input su Firefox

Il problema del padding

In Firefox nonostante si cerchino di azzerare le proprietà tramite un reset o impostandone il giusto font-family, i campi input di tipo button e submit manterranno sempre un piccolo padding dettato dall’UA Style Sheet. Questo può risultare fastidioso se ci ritroviamo ad unificare le dimensioni dell’input affiancandolo ad un pulsante che ha una “a” come elemento.

Codice html

Questo è il codice html. L’immagine in basso riporta quello che si vede in Firefox. Puoi notare che l’elemento centrale è ben più alto degli altri due.

<a href="#">Elemento a</a>

<input type="button" value="Campo Input" />

<a href="#">Elemento a</a>

fix_height_button

Come risolvere?

La questione può essere risolta in più modi. Il più semplice è naturalmente settare ogni singolo padding di un elemento per far in modo che sia alto quanto l’altro.

Il secondo metodo è quello di impostare i margini negativi all’interno di ::-moz-focus-inner in modo da correggerne l’altezza.

input::-moz-focus-inner{margin-top:-2px; margin-bottom:-1px;}

Suggerimenti?

Conoscevi già questa soluzione? Se hai da suggerire altri metodi puoi segnalarli nei box dei commenti o sulla nostra Fanpage 😉 .

Fonte

Firefox Button Height Fix di David Walsh

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github