Pubblicato il 17/07/13e aggiornato il

Risolvere i problemi di visualizzazione con Internet Explorer dei blog su piattaforma Blogger.

Come inserire i metatag di compatibilità per fare in modo che i blog su Blogger siano visibili correttamente con Internet Explorer e con gli altri browser.
Se siete utenti di Blogger e vi piace modificare il modello per renderlo originale e funzionale vi sarà certamente capitato di fare dei cambiamenti che funzionavano perfettamente con tutti i browser con l'eccezione di Internet Explorer. Questo genera arrabbiature miste a frustrazione considerato che Internet Explorer è comunque tuttora utilizzato da una discreta fetta di navigatori.

Ho già parlato di come si possa intervenire nel modello per avere una corretta visualizzazione anche con IE ma forse è il caso di riprendere il tema anche perché nel frattempo ci sono state delle novità. Diciamo subito che un blog su piattaforma Blogger è compatibile con Internet Explorer 7 o superiori. I problemi arrivano quando si introducono widget di terze parti o delle personalizzazioni che non sono supportate da Internet Explorer. Se voi andate su Modello > Modifica HTML, subito dopo <head>, troverete la riga

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>       1)

In alcuni template scaricati da Internet è possibile che questa riga non ci sia e questo può anche essere uno dei motivi per una cattiva visualizzazione con Internet Explorer

riga-compatibilità-internet-explorer

Questi metatag non interferiscono con i contenuti delle pagine ma dicono a IE di fare il rendering della pagina come in Internet Explorer 7. Se un widget o uno script che avete installato richiede però Internet Explorer 8 o superiore ecco che subentrano i ben conosciuti problemi di grafica.

Il nostro obiettivo sarà quello di fare in modo che la compatibilità venga estesa a altri browser di casa Microsoft visto che Internet Explorer supporta diverse modalità di compatibilità. Passo brevemente a elencarle secondo quanto riportato dalla stessa Microsoft:
  1. "IE=7" fa in modo che la visualizzazione sia quella standard di IE7
  2. "IE=EmulateIE7" dice a IE7 come eseguire il rendering del contenuto
  3. "IE=8"  supporta gli standard CSS2 e alcuni CSS3
  4. "IE=EmulateIE8" dice a IE8 come eseguire il rendering del contenuto
  5. "IE=9" garantisce il supporto a HTML5 e CSS3
  6. "IE=EmulateIE9" dice a IE9 come eseguire il rendering del contenuto
  7. "IE=10" garantisce il massimo supporto a HTML5, CSS3 e a altri linguaggi emergenti
  8. "IE=edge" dice a IE di visualizzare il contenuto nella più alta compatibilità possibile
Nei modelli a Visualizzazione Dinamica nella riga di metatag è presente anche la stringa chrome=1 che, secondo quello che dice lo stesso Google, introduce la compatibilità con Google Chrome Frame. Gli utenti che hanno questo plugin possono accedere alle tecnologie di Chrome e al motore javascript.
Si possono unificare tutte queste compatibilità in una sola riga in questo modo:

<meta content='IE=IE7; IE=IE8; IE=IE9; IE=IE10; IE=edge; chrome=1' http-equiv='X-UA-Compatible'/>

Dopo aver salvato il template andiamo su Modello > Modifica HTML e cerchiamo la riga 1) che solitamente si trova sotto al tag <head>. Cancelliamola e sostituiamola con la precedente in questo modo

compatibilità-internet-explorer
Si salva il modello. Se non riuscite a trovare la riga in questione perché avete un template vecchio o scaricato da internet vi basterà comunque incollare questa nuova riga subito dopo <head>. In questo modo dovreste aver risolto una volta per tutte le difficoltà di visualizzazione con Internet Explorer.




22 commenti :

  1. Nei blog creati da maggio in qua (entrambi usano il template Semplice) quella stringa non esiste più. Secondo te è meglio inserirla?

    Elena

    RispondiElimina
  2. Scusa Ernesto ma sono tardo: nel caso del mio templare che ha la stringa in questo modo:
    meta content='IE=8, IE=9, IE=10' http-equiv='X-UA-Compatible'/
    cosa dovrei fare? Aggiungere :'IE=EmulateIE7' subito dopo il simbolo = ?
    Grazie per la pazienza.Ciao!

    RispondiElimina
  3. @D.Perina
    Se il nostro blog viene visualizzato correttamente con IE allora potrebbe essere pleonastico aggiungere questa riga. Però la modifica non danneggia in alcun modo il sito e protegge il layout da possibili malfunzionamenti futuri

    @massimiliano
    Se hai quella riga significa che probabilmente avevi seguito le istruzioni del post che avevo già dedicato a questo tema e che ho linkato nel'articolo. E' meglio quindi sostituire la riga che hai adesso con questa perché ha anche la compatibilità "IE=edge" che dovrebbe servire anche in caso di aggiornamenti futuri di IE
    @#

    RispondiElimina
    Risposte
    1. Hai ragione. Non serve a granchè inserirla - i problemi di visualizzazione con IE rimangono. A ogni modo, grazie per l'info.

      Elimina
  4. segnalo che con chrome non si vedono più la barra delle pagine in alto e il menu a scomparsa laterale destro dei blog a visualizzazione dinamica oltre allo sfondo scelto per il blog mentre non ci sono problemi con IE e volpe .. pensa te!!
    ho mandato un feedback direttamente a Mountain View ma al momento permane la situazione credo riferibile ad uno degli ultimi aggiornamenti automatici del loro browser

    RispondiElimina
  5. io continuo (stranamente) ad avere problemi con Chrome, che non mi visualizza correttamente la slideshow degli articoli recenti, posizionata in basso a fine template del blog, e non capisco il perchè. Nessun problema invece con Firefox.

    RispondiElimina
  6. Prendete questo articolo come un tentativo di migliorare la situazione. Nel mio caso per esempio fa in modo da mostrare correttamente anche su IE il Menù multilivello. Poi si sa che ogni modello fa storia a sé.
    Il caso di Chrome poi è particolare. Secondo me mettono troppa carne al fuoco. Con l'ultimo aggiornamento vogliono passare dal browser webkit a un altro motore proprio quando Firefox ha invece deciso di passare a webkit :P
    @#

    RispondiElimina
  7. se interessa a qualche utilizzatore delle visualizzazionji dinamiche ho trovato l'inghippo online che google non vuol risolvere ma che con un semplice passaggio si può correggere in pratica ossessionati dal caricamento pagine non hanno pensato che un blog che usa queste dinamiche man mano che diventa grande rallenta il caricamento e allora troncano tralasciando parti importanti del layout a scapito del visitatore e sembra che siamo stati in tantissimi a segnalare la cosa
    orbene se posso e Ernesto acconsente
    in modifica HTML scendete in fondo e sotto alla riga che inizia con blogger.ui
    in luogo di 0 (zero) mettete 500 (cinguecento) in pratica mezzo secondo in più per caricare e tutto funziona di nuovo .. ovviamente salvare il modello prima di uscire
    ripeto solo un 50 davanti allo 0 e il gioco è fatto
    vedi tu Ernesto se pubblicare o meno questo commento

    RispondiElimina
    Risposte
    1. Stavo per pubblicare un post in merito. Mi hai preceduto :) @#

      Elimina
  8. Purtroppo anche con quest'ultima modifica i problemi con le vecchie versioni di IE restano.

    Ciao Parsi. :)

    RispondiElimina
    Risposte
    1. Intendi con IE6 o precedenti? Perché con IE7 e successive si doveva risolvere qualcosa :P
      @#

      Elimina
    2. Anche con IE 7 ci sono ancora problemi di visualizzazione e compatibilità di alcuni widget. Non ne parliamo proprio con IE 6. :)

      Elimina
    3. Va beh ma IE7 si spera che non lo usi più nessuno! Anche Youtube ha cessato il supporto per quel browser :P
      @#

      Elimina
    4. Mi auguro che più nessuno adotti alcuna versione di IE. :)

      Elimina
  9. Ciao Ernesto,
    non c'è una stringa di codice che oltre a Explorer e Chrome comprenda anche Firefox?
    Grazie

    RispondiElimina
  10. Ti spiego il problema: è su un blog hostato su Wordpress, dove ci sono due post che hanno ricevuto molti commenti (quindi la lunghezza della pagina deve essere maggiore). In questi post succede che - solo su Firefox - un pezzo di sfondo alla fine viene a mancare. Per sfondo non intendo lo sfondo esterno, ma solo lo sfondo subito dietro i post: quindi rimane uno spazio tra lo sfondo dietro i post e il footer. Con Chrome ed Explorer la cosa non accade, e nemmeno negli altri post.
    Tu sai cosa potrebbe essere e come si potrebbe risolvere?
    Perché non conosco il funzionamento di Wordpress, ad esempio non so se nel codice del template viene inserita una stringa di codice che ne definisce la lunghezza, e magari in questi due post che sono particolarmente lunghi, è andata esauita.
    L'altra anomalia è che un'altra persona che ha provato a visualizzarlo con Firefox dice che invece lo sfondo appare normalmente. (?)
    Grazie

    RispondiElimina
    Risposte
    1. Se ad altri su Firefox appare normalmente allora potrebbe essere un problema del tuo browser. Forse dei cookie incompatibili o cose del genere, penso. Prova a togliere la cache. Fino a poco fa quello che andava bene per Chrome andava bene anche per Firefox visto che erano entrambi browser webkit. Ora sembra che le loro strade si dividano.
      P.S. Beata te che hai problemi come questi :DD
      @#

      Elimina
    2. Non è mio il blog, è un blog di scrittura creativa per il quale ho scritto un paio di guest post ;)
      Avevo già provato a cancellare cache, cookies, ecc., ma il problema permane.
      Inoltre, anche l'autore del blog ha lo stesso problema, quindi non è solo il mio browser...

      Elimina
    3. Allora sarà un problema relativo al Tema utilizzato nel sito che ha dei bug con Firefox
      @#

      Elimina
  11. Ok, grazie.
    La cosa strana, però, è che succede solo nelle due pagine dei post più commentati, e quindi più lunghi.
    (Quello utilizzato non è un tema di quelli preconfezionati).
    Grazie lo stesso :)

    RispondiElimina
  12. Funziona davvero. Mi sono posta il problema adesso con la barra informativa dei cookie che IE nascondeva. Aggiungendo questo codice al modello si vede perfettamente :-D Di nuovo grazie!

    RispondiElimina

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.