CSS compatibili con Internet Explorer

Vi sarà sicuramente capitato di incappare nei rebus del “funziona su tutti i browser tranne che su Internet Explorer”!

Internet Explorer è infatti croce e delizia (più croce che delizia) dei web designer, infatti sono parecchie le sfumature compatibili con tutti i browser eccetto IE.

Vediamo in questo post come ovviare il problema.

browsers-css-ie-compatibilità

Attraverso i commenti nei fogli di stile CSS possiamo imporre di vedere il sito con un CSS personalizzato quando l’utente che apre il sito lo fa attraverso ie, possiamo anche indicare un foglio di stile per ogni versione di explorer. Dobbiamo ammetter che da IE 9 in poi molti problemi son stati risolti però la maggior parte dei siti responsive danno problemi di compatibilità con le versione explorer 8 e antecedenti.

COME ASSOCIARE UN CSS PERSONALIZZATO SOLO PER CHI USA EXPLORER

Nell’HEAD del nostro sito dobbiamo inserire i seguenti commenti:

  • <!–[if IE]>CODICE DA INSERIRE O RICHIAMO A UN FOGLIO CSS PER IE<![endif]–> – tutte le versioni di Internet Explorer
  • <!–[if IE 6]>CODICE DA INSERIRE O RICHIAMO A UN FOGLIO CSS PER IE<![endif]–> – versione 6 di Internet Explorer
  • <!–[if !IE 6]>CODICE DA INSERIRE O RICHIAMO A UN FOGLIO CSS PER IE<![endif]–> – tutte le versioni tranne la 6 di Internet Explorer
  • <!–[if gt IE 6]>CODICE DA INSERIRE O RICHIAMO A UN FOGLIO CSS PER IE<![endif]–> – tutte le versioni superiori alla 6 (esclusa) di Internet Explorer
  • <!–[if gte IE 6]>CODICE DA INSERIRE O RICHIAMO A UN FOGLIO CSS PER IE<![endif]–> – tutte le versioni superiori alla 6 (compresa) di Internet Explorer
  • <!–[if lt IE 6]>CODICE DA INSERIRE O RICHIAMO A UN FOGLIO CSS PER IE<![endif]–>– tutte le versioni inferiori alla 6 (esclusa) di Internet Explorer
  • <!–[if lte IE 6]>CODICE DA INSERIRE O RICHIAMO A UN FOGLIO CSS PER IE<![endif]–> – tutte le versioni inferiori alla 6 (compresa) di Internet Explorer

Possiamo selezionare la versione di explorer semplicemente cambiando il numero 6 con il numero della versione ci interessa.

 

I COMANDI CSS CHE EXPLORER NON LEGGE DALLA VERSIONE 5 ALLA VERSIONE 8:

  • l’evento :focus;
  • gli eventi :before e :after;
  • il contenuto generato;
  •  border-spacing per le tabelle;
  •  empty-cells per le tabelle;
  • caption-side per le tabelle;
  •  clip;
  • outline;
  • il valore inline-block per la proprietà display;
  • i valori legati alle tabelle per la proprietà display;
  • la definizione dei tipi di media con la direttiva @-import.
  • position: fixed.

Per avere l’elenco completo potete usufruire del documento Microsoft presente in questo link.

Share

Promozioni

Potrebbe interessarti



Francesco PC Academy
Francesco: Lavora come freelance, si occupa di Web Design & Marketing, Strategie Digitali, Blogging e docenza. Per PC Academy cura: il tutoraggio dei corsi online Scrittura Creativa e Sceneggiatura; le lezioni in aula sulla creazione del CV infografico e come Presentarsi alle Aziende in modo professionale; la redazione di molti articoli di questo portale.

Commenti