Corsi on-line

Risolvere i problemi di padding negli input su Firefox

Alcune applicazioni interpretano parte delle istruzioni per la formattazione degli elementi di pagina sulla base dello UA Style Sheet dove “UA” è un acronimo che sta per “User Agent“; in pratica, si tratta di un insieme di regole di stile CSS standard che un User Agent, ad esempio un browser, adotterà nel momento in cui gli verrà inviata una richiesta per la visualizzazione di un contenuto.

Submit

I browser interpretano le direttive dello UA Style Sheet così come le regole presenti all’interno dei fogli di stile creati dagli sviluppatori o i riferimenti CSS presenti nelle pagine Internet, questi elementi possono però sovrapporsi; capita infatti che applicazioni come Firefox non tengano conto di reset per la personalizzazione di alcune componenti e continuino a seguire le indicazioni dello UA Style Sheet.

Nel caso specifico di questo post verrà descritto il comportamento dei campi di tipo button e submit che, nel browser della Mozilla Foundation, tendono a conservare un padding che rende difficoltoso il loro ridimensionamento; per cui, se per caso volessimo ottenere le stesse dimensioni per un pulsante linkato e un input, lo UA Style Sheet potrebbe rappresentare un ostacolo.

Un esempio relativo al caso in analisi potrebbe essere il seguente:

<a href="http://blog.mrwebmaster.it">Blog</a>
<input type="button" value="Invia" />
<a href="http://blog.mrwebmaster.it">Blog</a>

A tal proposito, il sempre bravo David Walsh propone di adottare una soluzione basata su l’impostazione dei margini negativi tramite ::-moz-focus-inner al fine di ottenere una correzione dell’altezza a carico dell’input:

input::-moz-focus-inner { 
	border: 0; 
	padding: 0; 
	margin-top:-2px; 
	margin-bottom: -2px; 
}

Questo accorgimento si rivelerebbe migliore rispetto al solo azzeramento del border e del padding che da solo non determinerebbe un ridimensinamento dell’input, inoltre, non vi sarà la necessità di impostare il padding per ciascun elemento fino all’ottenimento dell’altezza desiderata.

Per approfondire

Post correlati
I più letti del mese
Tematiche