Il problema della diversa interpretazione dei fogli stile da parte di Internet Explorer (soprattutto dalla versione 7 in giù) è noto a molti, soprattutto chi lavora assiduamente in questo settore non ne può più di vedere come questi browser interpretino liberamente le nostre dichiarazioni CSS. La soluzione spesso più elegante è quella di creare dei fogli stile ad hoc che vengano letti solamente se il browser in questione è, per l’appunto, una qualsivoglia versione di explorer. Prima di addentrarci negli hack specifici riassumo brevemente come utilizzare i commenti condizionali per fare quanto appena detto. Quello che inseriremo nel commento nel nostro caso sarà ragionevolmente il tag link che carica il foglio stile.

Commenti condizionali per Internet Explorer

<!--[if IE]>
Qui inseriremo ciò che vorremmo venisse letto da qualsiasi versione di Internet Explorer
< ![endif]-->
<!--[if IE 5]>
Qui inseriremo ciò che vorremmo venisse letto solo da Internet Explorer
< ![endif]-->
<!--[if IE 5.0]>
Qui inseriremo ciò che vorremmo venisse letto solo da Internet Explorer 5.0
< ![endif]-->
<!--[if IE 5.5]>
Qui inseriremo ciò che vorremmo venisse letto solo da Internet Explorer 5.5
< ![endif]-->
<!--[if IE 6]>
Qui inseriremo ciò che vorremmo venisse letto solo da Internet Explorer 6
< ![endif]-->
<!--[if IE 7]>
Qui inseriremo ciò che vorremmo venisse letto solo da Internet Explorer 7
< ![endif]-->
<!--[if gte IE 5]>
Qui inseriremo ciò che vorremmo venisse letto da qualsiasi versione uguale o superiore ad Internet Explorer 5
< ![endif]-->
<!--[if lt IE 6]>
Qui inseriremo ciò che vorremmo venisse letto da qualsiasi versione inferiore ad Internet Explorer 6
< ![endif]-->
<!--[if lte IE 5.5]>
Qui inseriremo ciò che vorremmo venisse letto da qualsiasi versione inferiore o uguale ad Internet Explorer 5.5
< ![endif]-->
<!--[if gt IE 6]>
Qui inseriremo ciò che vorremmo venisse letto da qualsiasi versione superiore ad Internet Explorer 6
< ![endif]-->

Ogni condizione può essere sostituita con il numero della versione che ci interessa targetizzare, anche le più recenti. A volte però, e torniamo al nostro discorso, non vogliamo realizzare un foglio stile a parte perchè magari il fix da realizzare è davvero minimo ed isolato. In questo caso vengono in aiuto gli hack css, applicabili direttamente dentro al nostro foglio stile. Vediamo quali sono.

Hacks e Fix CSS per Internet Explorer

Le proprietà seguenti saranno uniche per la versione del browser presa in considerazione.

Internet Explorer 8

.color {color: #0FC\0/;}

Elemento targetizzante: \0/

Internet Explorer 7

*+html .box {background:#fff;}
*:first-child+html .box {background:#fff;}

Elementi targetizzanti: *+ e *:first-child+

Internet Explorer 7 e inferiori

.box {
    *background: #f90; 
}

Elemento targetizzante: *

Internet Explorer 6

.box {
    _background: #f90; 
}

Elemento targetizzante: _

Vi possono essere tuttavia altri modi e codici di utilizzare gli hack, resta tuttavia sempre più pulito (anche perchè non compromette la validazione w3c) utilizzare fogli stile ad hoc!