Pubblicato il 10/10/12e aggiornato il

Come visualizzare correttamente i blog su Blogger con Internet Explorer 8, 9 e 10.

Come rendere compatibile i vostro blog su Blogger con Internet Explorer 8, Internet Explorer 9 e Internet Explorer 10.
Uno dei maggiori problemi per gli webmaster dilettanti e professionisti è quello che in gergo tecnico si chiama cross-browser e che determina una visualizzazione diversa delle pagine quando si passa da un browser a un altro. Queste questioni di compatibilità sono molto sentite soprattutto per i browser di casa Microsoft. Con IE7 furono fatti dei significativi miglioramenti rispetto a IE6 ma le problematiche sono rimaste pressoché intatte.
 
I modelli di Blogger sono stati sviluppati diversi anni fa quando il browser più moderno di Microsoft era appunto IE7 e nel codice di tutti template di Blogger fu inserita una riga di compatibilità come questa
 
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

Anche se usate un template ufficiale di Blogger da pochi giorni probabilmente ci sarà lo stesso codice. Tale riga è però diventata obsoleta visto che non considera IE8, IE9 e IE10 che sarà abbinato a Windows 8 in uscita il prossimo 26 Ottobre.
 
Questo significa in pratica che gli utenti che usano il browser IE9 potrebbero visualizzare il vostro sito secondo la compatibilità di IE7 o addirittura di IE6. Per fortuna da allora ci sono stati miglioramenti in casa Microsoft. Se il vostro sito su Blogger non viene visualizzato correttamente con IE8 o IE9 può essere risolutivo andare su Modello > Modifica HTML > Procedi e sostituire la riga precedente con
 
<meta http-equiv='X-UA-Compatible' content='IE=8, IE=9, IE=10'/>

secondo l'elenco dei tag di compatibilità che ci vengono forniti dalla stessa Microsoft. Per controllare la visualizzazione del vostro sito con l'ultima versione di Internet Explorer si può usare il componente aggiuntivo IE Tab Classic per Chrome e per Firefox.
 
Alternativamente si può incollare quest'altra riga
 
<meta content='IE=9,chrome=1' http-equiv='X-UA-Compatible'/>
 
che fissa la compatibilità con il solo IE9 e con Chrome. Unendo le condizioni la riga diventa
 
<meta content='IE=8, IE=9, IE=10, chrome=1' http-equiv='X-UA-Compatible' />
 




19 commenti :

  1. Wow! Questo articolo è davvero interessante.

    Sto pensando di rinnovare la grafica del mio blog. Quando effettuerò il passaggio, modificherò pure questa stringa.

    Non sai i salti mortali per rendere tutto uguale (o quasi) con tutti i browser. Anche una modifica minima a volte porta via ore...

    Thanks a million. ;)

    RispondiElimina
  2. Notizia Fantastica :) ^_^ ^_^ ^_^ ^_^ ^_^

    RispondiElimina
  3. Finalmente svelato l'arcano, grazie della dritta!
    Una sola cosa: perché aggiungere chrome=1?

    RispondiElimina
    Risposte
    1. @AlbertoArdito
      Ho visto che è presente nei Modelli a Visualizzazione Dinamica quindi se lo hanno messo è probabile che a qualcosa serva. Nei normali template sono invece rimasti a IE7

      Elimina
  4. Spettacolare! Adesso il mio blog appare perfettamente su IE! Grazie mille!!!

    RispondiElimina
  5. Sai che cosa strana?
    Quando provo ad inserire nel modello una delle stringhe che indichi sopra, con Explorer il blog si vede bene (= a Firefox), tranne che nella parte dell'header, che si ingrandisce e rimpicciolisce di continuo... Tornando alla vecchia stringa, torna normale. Significa che devo per forza lasciare la vecchia stringa?

    RispondiElimina
    Risposte
    1. @DietaEDintorni
      Devi essere tu a scegliere quella che ritieni la soluzione migliore. Personalmente non mi curo più molto di come si vede il sito su IE

      Elimina
  6. Ciao Ernesto. Da poco seguo il tuo blog e mi ha aiutato in moltissime cose. Da poco ho risistemato un po' la grafica al mio blog ed ho aggiunto un css, questo
    .PageList {
    text-align:center !important;
    }
    .PageList li {
    display:inline !important; float:none !important;
    }
    per centrare il widget pagine.
    Non uso Explorer, ma mi è stato detto che le voci delle pagine si allineano tutte in verticale, anzichè in orizzontale.
    Ho provato a sostituire la famosa riga di codice con le tue, ma... nulla!
    Hai dei suggerimenti?
    Ti ringrazio,
    Silvia

    RispondiElimina
    Risposte
    1. @# Cara Silvia con IE siamo sempre alle prese con questi problemi. Oltre al codice presente in questo post non conosco altri sistemi per risolvere. Credo di aver capito che tu abbia inserito un elenco di link nel layout e che lo abbia personalizzato per vederlo in orizzontale. Non so se lo hai già fatto ma trascinando il widget sotto l'intestazione viene visualizzato in orizzontale automaticamente (su IE non so se sia effettivamente così).

      Elimina
    2. Ciao Ernesto, grazie per la risposta! Ho inserito da subito sotto l'intestazione le "pagine", uso blogspot. Di default le voci vengono allineate a sinistra, così l'ho personalizzato per metterle centrate... Mentre IE carica, si vedono orizzontali, al termine si dispongono una sotto l'altra... Purtroppo da quello che vedo nelle statistiche, ci sono ancora molte persone che usano IE! ;-)
      Ho postato una domanda anche al forum di assistenza, se mi dicono qualcosa di la ti faccio sapere.
      Togliendo il css elimino questo problema però... volevo cercare una soluzione!
      Grazie ancora, e buona domenica!

      Elimina
  7. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. ciao ernesto
      sto usando ora queste tue indicazioni: il blog l' ho creato il 14 aprile, dunque con il nuovo format dell' editor html...
      non trovo la stringa me ta co ntent=' IE=EmulateIE7' ht tp-eq uiv='X-UA-Compati ble'/>(ho letto i tuoi post sull' uso del nuovo editor, quindi so come si fa): sai se per caso è cambiato qualcosa? il modello che ora uso è il Fantastico Spa
      grazie e buon lavoro

      Elimina
    2. Ps: ho messo degli spazi per scrivere la stringa per riuscire a metterla nel commento

      Elimina
  8. @# Christian Citton
    Se elimini un commento non fare delle risposte allo stesso altrimenti non lo posso cancellare definitivamente. Per cercare il codice segui questi tutorial
    http://www.ideepercomputeredinternet.com/2013/04/new-blogger-template-editor.html
    http://www.ideepercomputeredinternet.com/2013/04/editor-html-blogger-video-tutorial.html
    A breve pubblicherò un nuovo video tutorial visto le domande che ricevo su questo tema

    RispondiElimina
  9. Ciao Ernesto ascolta ma il blog si può rendere pure compatibile a google chrome per caso? Perchè il menù messo orizzontale lo vede messo verticale...
    ps: io uso firefox.

    RispondiElimina
    Risposte
    1. @# In quella stringa di codice c'è anche Chrome... poi bisogna testare :)

      Elimina
  10. Ciao Ernesto! Come sempre i tuoi aiuti e le tue dritte funzionano sempre! è anche grazie a te, che i nostri blog non sono dei piccoli scempi! :)
    Dunque le mie amiche dicono che vedono lo sfondo del blog spezzato a metà, sia con IE che con Chrome. http://safleurs.blogspot.it/ Ho provato a cercare la stringa per effettuare la modifica di cui parli in questo articolo, ma purtroppo non è presente. :( Secondo te quale può essere il problema?

    RispondiElimina
    Risposte
    1. @# Se la stringa non è presente possono provare a aggiungerla subito dopo < head >

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.