Explorer è storicamente la bestia nera dei CSS, anche nella sua ultima incarnazione: cattive interpretazioni, bug e altre brutte abitudini costringono chiunque abbia mai scritto quattro righe di foglio di stile a fare i conti con la resa corretta cross-browser.
A tal proposito mi sono imbattuto in un non troppo recente articolo molto interessante di Nicholas Gagne: Debugging CSS in Internet Explorer.
L’articolo che segnalo, il primo di una serie, espone una serie di problemi comuni in cui si incappa durante il debug del foglio di stile e propone delle soluzioni pratiche e veloci. In sintesi è un piccolo vademecum della lotta al bug (si parla del peekaboo, del double-margin, min-height/line-height etc) condito con qualche consiglio pratico di scrittura. Decisamente utile.
Aspettando (vanamente, immagino) il seguito rilancio con qualche piccolo suggerimento che mi trovo sempre più spesso a mettere in pratica quando devo dar da mangiare ad IE il mio css: è la solita brutta storia del box-model. Invece di ricorrere ad hacks e/o commenti condizionali, spesso basta poco per far passare la paura:
- Se l’elemento lo permette, usare il margin al posto del padding. Ad esempio su un div trasparente.
- Se ho elementi flottanti invece, il margin può dare delle noie ed è meglio ricorrere ad un padding.
- Se devo usare un padding, allora è meglio che l’elemento abbia width/height al 100%. Questo è comodo se, ad esempio, ho un elemento wrapper che definisce la dimensione del layout, e posso permettermi di non preoccuparmi dei width degli elementi interni.
Ovviamente ogni situazione fa caso a se, ho cercato di generalizzare il più possibile. Alla fine non è niente di speciale, sono solo piccoli accorgimenti.
Buona lettura.