Display inline-block cross browser

L’importanza della proprietà display In un precedente articolo di Antonio Polese sulla modifica dei ruoli, c’è un concetto direi fondamentale […]
Display inline-block cross browser

L’importanza della proprietà display

In un precedente articolo di Antonio Polese sulla modifica dei ruoli, c’è un concetto direi fondamentale sul quale si basa tutto il funzionamento dei CSS, ovvero la natura intrinseca di un elemento. Quando setti la propietà display per un particolare elemento del DOM, devi sempre ricordati che stai modificando il ruolo di visualizzazione, non la sua natura intrinseca.

Display block, inline e inline-block

Non mi dilungherò più di tanto sulla spiegazione tecnica di queste tre proprietà. Mentre gli elementi blocco generano sempre nuove righe sia prima che dopo i loro riquadri, gli elementi inline non generano alcuna interruzione, susseguendosi uno di fianco all’altro. Gli elementi a cui viene applicata la proprietà display:inline-block, risultano essere ibridi dell’uno e dell’altro. Essi sono disposti in una riga proprio come un qualsiasi elemento inline, ereditando tutte le regole della formattazione degli elementi inline, mentre al loro interno sono formattati come se fossero elementi di blocco; è possibile quindi associare le propietà width o height come si fa con qualsiasi elemento blocco. Per approfindire questi concetti ti rimando ad alcuni articoli.

Il Codice

Il codice in se non necessita di molte spiegazioni. L’unica cosa che devi ricordare è che per quanto riguarda IE6 e IE7 il valore “inline-block” ha effetto solo su elementi che per loro natura sono di tipo inline. Quindi soltanto per queste due versioni, inseriamo “display:inline” preceduto dal simbolo asterisco per simulare “inline-block” (l’asterico rende valide le proprietà solo per le due versioni prima indicate). Infine potrebbe essere prudente, se non intendiamo utilizzare ne altezze o larghezze (dato che gli elementi si adatteranno in altezza e larghezza ai contenuti), l’utilizzo di zoom:1 per non incorrere in problemi di “HasLayout”.

<div id="element">Testo contenuto in un elemento inline-block</div>
#element{
    display:inline-block;
    zoom:1;
    *display:inline;
}

Provalo subito

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