immagine avatar

Ciao come puoi notare ho dato una bella rinfrescatina al mio blog!
Attendo un tuo feedback, per suggerimenti e ulteriori proposte di miglioramento, ma anche, sperando che non ci siano, segnalazioni di errori o malfunzionamenti del blog. Buona lettura!

Fissare il problema dell’overflow orizzontale IE

di MaiNick | 16 ott 2008 | javascript, jQuery | 4 Commenti

Internet Explorer ha una diversa impostazione dell’overflow rispetto a Firefox o Safari.

Ho trovato questo plugin per jQuery che permette di fissare il problema dell’overflow orizzontale sullo stesso browser. E’ possibile seguire il progetto alla pagina dell’autore.

In particolare , Firefox e altri, se si ha un overflow orizzontale dell’elemento pone la barra di scorrimento sul lato esterno dell’elemento. In Internet Explorer, se non possiamo vedere tutto il contenuto in verticale, genera la barra di scorrimento verticale, insieme alla barra di scorrimento orizzontale.

Ma il caso peggiore si ha quando abbiamo una sola riga overflowed: la barra di scorrimento orizzontale non è estesa su tutto l’elemento, rimane comunque un piccolo spazio laterale per la barra di scorrimento verticale anche non visualizzandola.

Seguendo l’autore, una soluzione al problema è di applicare i seguenti passi, solo per Internet Explorer:

  1. trovare tutti gli elementi il cui contenuto è visualizzato con barra di scorrimento orizzontale
  2. aggiungere 20 pixel di padding-bottom agli elementi
  3. scostare la barra di scorrimento verticale

E’ possibile applicare questi tre punti tramite JavaScript:

window.onload = function () {
  // solo IE
  if (!/*@cc_on!@*/0) return;

  // trova gli element di prova
  var all = document.getElementsByTagName('*');
  var i = all.length;

  while (i--) {
    // se scrollWidth (la reale larghezza) è superiore alla
    // alla larghezza visibile, applicare le modifiche di stile
    if (all[i].scrollWidth > all[i].offsetWidth) {
      all[i].style['paddingBottom'] = '20px';
      all[i].style['overflowY'] = 'hidden';
    }
  }
};

o creare un plugin per jQuery con tale codice:

(function ($) {
  $.fn.fixOverflow = function () {
    if ($.browser.msie) {
      return this.each(function () {
        if (this.scrollWidth > this.offsetWidth) {
          $(this).css({ 'padding-bottom' : '20px', 'overflow-y' : 'hidden' });
        }
      });
    } else {
      return this;
    }
  };
})(jQuery);

// uso
$('pre').fixOverflow().doOtherPlugin();
Tags: , ,

4 Commenti

  1. Quante imprecazioni prima di JQuery.

    Molti non lo sanno ma con qualche kb in più puoi risolvere delle incompatibilità (come il canale alpha dei png su IE 6) in maniera molto pulita.

    Tanto pulita che ragionando in maniera modulare (e facendo un pò di progressive enhancement) oramai sono rari i layout che si smontano al fatidico confronto con il browser microsoft e che richiedono ore extra di fixing

Trackbacks

  1. diggita.it scrive:

    Fissare il problema dell’overflow orizzontale in Internet Explorer…

    Internet Explorer ha una diversa impostazione dell’overflow rispetto a Firefox o Safari. Plugin jQuery per fissare il problema dell’overflow orizzontale sullo stesso browser…

  2. upnews.it scrive:

    Fissare il problema dell’overflow orizzontale in Internet Explorer…

    Plugin jQuery per fissare il problema dell’overflow orizzontale sullo stesso browser…

  3. pligg.it scrive:

    Fissare il problema dell’overflow orizzontale in Internet Explorer…

    Plugin jQuery per fissare il problema dell’overflow orizzontale sullo stesso browser…

Lascia un Commento

^ Torna su