Windows Vista » Sviluppo » Software » Internet » CSS

Come sopportare IE6 e vivere felici

mercoledì 26 novembre, 2008

Trovo sempre un certo “malore” quando affronto l’argomento “compatibilità tra i browser”. Inoltre, e devo ancora capirne il vero motivo, tra tutti i browser che conosco quello più “antipatico” rimane sempre lui: Microsoft Internet Explorer 6! Purtroppo la release 6 di IE è ancora in circolazione e sono frequenti le segnalazioni di problemi nella visualizzazione delle pagine.
Un Web Developer deve quindi organizzarsi in modo tale da avere a disposizione tutti gli strumenti per il controllo e la verifica del proprio (sudato) lavoro su tutti i possibili browser (e piattaforme) disponibili. Microsoft Internet Explorer, più degli altri, rende questo compito più arduo in quanto – ad oggi – è necessario verificare le proprie pagine web sia con la più recente versione 8 (ancora in beta) sia con le precedenti versioni, come la 6 o la 5.5. Esistono vari modi per far convivere versioni diverse di Explorer (vedi Usare Microsoft Internet Explorer 6 e 7 contemporaneamente) ed in alternativa esistono anche ottimi (anche se un po’ lenti) servizi online.

image

Un’altra ottima possibilità, che funziona bene su Windows Vista, è rappresentata da IETester, un’applicazione completamente gratuita e realizzata dagli stessi sviluppatori di DebugBar e Companion.JS. IETester, nonostante sia ancora in beta e con qualche crash in agguato, permette rapidamente di verficare le nostre pagine – contemporaneamente – sia su IE5.5, IE6, IE7 e IE8 beta.

Patch CSS

Se grazie a IETester riusciamo a scovare un difetto negli stili, cioè un’interpretazione diversa tra IE6 e IE7, o IE6 e FireFox, ad esempio, trovata la soluzione dobbiamo far in modo che solo IE6 usi la nuova definizione. A me, ad esempio, è capitato con un margine! Avevo una classe che impostava il margine destro a 28px e, su tutti i browser, il risultato era identico, tranne che con IE6! Su quest’ultimo, per rendere il layout identico, dovevo usare un valore di 8px.
Un modo assai semplice, facile da ricordare ed estremamente immediato per risolvere il problema, è quello di “sovrascrivere” il nostro stile caricando un diverso file ad hoc solo se il browser è il – temuto – IE6:

1
2
3
4
/** ___ file ie_override.css
 * uso questo file per sovrascrivere uno stile
 */
div.mystyle{margin-left:8px}
1
2
3
4
<!-- stili per tutti i browser -->
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- stili solo per IE6 -->
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/ie_override.css" /><![endif]-->

Post correlati

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: , , , , , , , , , , , , ,

7 commenti a: “Come sopportare IE6 e vivere felici”

  1. 27 nov, 2008 Francesco:

    Finalmente un workaround semplice semplice..
    Complimenti per i tanti articoli tecnici molto interessanti, continua così!

    Rispondi Quota
  2. 27 nov, 2008 Julius:

    Io odio IE 6 per no parlare del 5, mi tornerà molto utile questo tool

    Rispondi Quota
  3. 30 nov, 2008 Gioxx’s Wall » Blog Archive » Best of Week #31:

    [...] Come sopportare IE6 e vivere felici [...]

  4. 09 gen, 2009 simo:

    Per evitare il bug del raddoppiamento del margine su IE6, non basta aggiungere display:inline?

    Rispondi Quota
  5. 09 gen, 2009 Giovambattista Fazioli:

    @simo:

    per evitare il bug del raddoppiamento del margine su ie6, non basta aggiungere display:inline ?

    Si, infatti, vedi Internet Explorer 6: eliminare il baco del doppio margine. In questo post, tuttavia, facevo un diverso tipo di esempio, più generico e per situazioni dove, purtroppo, non basta aggiungere un display:inline. :D

    Rispondi Quota
  6. 26 feb, 2009 ennio:

    Decisamente il peggior browser in circolazione, questo trucchetto lo uso spesso anche io e mi ha risolto parecchie rogne, nel mio sito invece mi sono rifiutato di utilizzarlo ed ho messo un link al download di IE 7, è ora che la gente si renda conto che questo browser va debellato.

    Rispondi Quota
  7. 26 feb, 2009 Giovambattista Fazioli:

    @ennio: concordo… :P

    Rispondi Quota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre>                                  // blocco generico
<code></code>                                // blocco generico
[cc_actionscript][/cc_actionscript]          // Actionscript
[cc_actionscript3][/cc_actionscript3]        // Actionscript 3
[cc_css][/cc_css]                            // CSS Style Sheet
[cc_html][/cc_html]                          // HTML
[cc_js][/cc_js]                              // Javascript
[cc_objc][/cc_objc]                          // Objective-C
[cc_php][/cc_objc]                           // PHP
[cc_sql][/cc_sql]                            // SQL