jQuery: affrontare i bug di Internet Explorer 6

  • jQuery
  • Gabriele Romanato

In questo articolo vorrei presentare alcune tecniche utili per risolvere alcuni bug visuali di Internet Explorer 6 con jQuery. Si tratta di tecniche molto semplici da implementare.

Clear dei float

In IE6 il clear dei float può essere implementato usando la stessa tecnica implementata negli altri browser tramite contenuto generato. Ovviamente IE6 non supporta il contenuto generato, quindi va usato un altro approccio:


$( ".clearfix" ).removeClass( "clearfix" ).
addClass( "clearfix-ie6" );

Dare "layout" agli elementi

La proprietà hasLayout è una caratteristica di IE6 e 7. Quando un elemento "non ha layout" si possono verificare una serie di bug che non sarebbero innescati se l'elemento "avesse layout".

A livello CSS si possono utilizzare due classi distinte per gli elementi di blocco ed inline:


.haslayout-block {
	height: 1%;
}

.haslayout-inline {
	zoom: 1;
}

Con jQuery dobbiamo solo ottenere il ruolo visuale degli elementi ed assegnare la classe scelta:


$( elements ).each(function() {
	var $element = $( this );
	var display = $element.css( "display" );
	if( display == "block" ) {
		$element.addClass( "haslayout-block" );
	} else if( display == "inline" ) {
		$element.addClass( "haslayout-inline" );
	}
});

Soluzioni per altri bug noti

Ecco alcune soluzioni per i bug più noti di IE6.

Margine raddoppiato dei float


var fixDoubledMargin = function( element ) {
	if( element.css( "float" ) !== "none" ) {
		var marginLeft = parseInt( element.css( "marginLeft" ) );
		var marginRight = parseInt( element.css( "marginRight" ) );
		
		if( marginLeft !== 0 || marginRight !== 0 ) {
			element.addClass( "ie6fixmarginbug" );
		}
	}
};



.ie6fixmarginbug {
	display: inline;
}

Italic bug


var fixItalicBug = function( element ) {
	if( element.css( "fontStyle" ) == "italic" ) {
		element.addClass( "ie6fixitalicbug" );
	}
};



.ie6fixitalicbug {
	overflow: hidden;
	height: 1%;
}

Che versione di jQuery usare?

Sebbene alcune delle ultime versioni di jQuery dichiarino una compatibilità con IE6, vi consiglio di effettuare un downgrade della libreria alla versione 1.4 fino alla 1.7.

Torna su