box hack

Secondo le specifiche CSS le dimesioni esplicite di un elemento indica l'area interna disponbile per il contenuto, cui verranno aggiunti margini e padding. Le varie versioni di I.E. hanno comportamenti divergenti: ecco la soluzione.

div#box{ width: 180px !important; width /**/: 200px; padding: 0 10px}

Otterremo sempre un box di area interna 180 con padding laterale di 10 Infatti: * l'ultima dichiarazione è quella che ha effetto, * !important dà la priorità, ma IE fino a 5 non la riconosce, * IE6 riconosce !important, ma non legge la riga dopo i commenti.

div#box{ height: 180px !important; height /**/: 200px; border: 5px solid #CCC; padding: 5px}

Ovviamente ciò vale anche per l'altezza o entrambe.

div#box{ background: url(shadow.png) !important; background: url(shadow.gif)}

L'uso di !important ha molte applicazioni: per esempio, dato che IE fino alla versione 6 non supporta le PNG trasparenti, potremo servigli una GIF.