Mi piacciono i misteri, soprattutto se servono a risolvere problemi complicati (o frustranti) in modo semplice  e veloce.

In questi giorni stavo litigando con un layout scritto per un cliente, con delle icone posizionate una a fianco all'altra tramite una favolosa proprietà css: display: inline-block;

Ho testato tutto sugli ultimi browser e funziona perfettamente, mi permette di evitare gli amati/odiati float e il mio umore ne giova particolarmente.

I problemi sono inaspettatamente ( -_- ) giunti quando ho testato il tutto con internet explorer 6 e 7: semplicemente, non conoscono quella proprietà e la ignorano. Gli elementi se ne stavano tutti tristi uno sotto l'altro, e il mio umore era sotto di loro a reggerne il peso.

Insomma per farla breve, vagando su internet ho scoperto che con un piccolissimo ritocco ai miei css potevo far funzionare tutto, con un semplice (ed usuale, purtroppo) commento condizionale posizionato al fondo di tutti gli altri css:

<!--[if lt IE 8]>
<style type='text/css'>
* html #menu li { display:inline; }  /* hack per IE 6 */
* + html #menu li { display:inline; }  /* hack per IE 7 */
</style>
<![endif]-->

Capito? Neanche io! Però funziona e tanto mi basta, in attesa che queste carrette del web facciano finalmente la fine che meritano.

Naturalmente, #menu li è quello che nel mio codice sfrutta la proprietà display: inline-block.

Inoltre, per chi ne avesse la necessità segnalo che è possibile far funzionare questa proprietà anche su firefox 2, tramite un semplice (e hackoso) display: -moz-inline-box;

Il mio umore è nuovamente alto.