Etrange bug sur Internet Explorer 8 avec Jquery

Bonjour à tous,

Je suis confronté à un problème que je n'ai jamais eu auparavant, dont je n'arrives mêmes pas à comprendre la logique.

J'ai conçu en Jquery un "accordéon" qui déplie donc des div qui contiennent du texte.
Sur Firefox, Safari, Chrome, Opéra, le script fonctionne très bien.
Sur Internet Explorer 8, l'animation fonctionne mais tous les éléments deviennent "monochromatique" (que deux couleurs s'affichent : le noir et le blanc).

Avant de cliquer, tout va bien :
http://uppix.net/6/f/9/d25d78f70a165d4a726af014a7af8tt.jpg

Une fois que j'ai cliqué :
http://uppix.net/0/4/0/9c3b151c011e3b756bb790f33f9datt.jpg

Donc voilà mon problème. J'ai fait ma petite enquête et j'ai pas trouvé le coupable :
- le background en png ? J'ai changé le background, supprimé, c'est pareil.
- un paramètre spécifique ? J'ai pas trouvé de paramètre qui transforme une div en monochromatique ^^'
- sur toute les div ? Oui, sur IE8 je peux dupliquer mon exemple, cela s'appliquera sur toutes les div de façon simultanée.
- sur IE7 et IE6 ? Je ne peux pas essayer car le script ne fonctionne tout simplement pas (pour le moment en tout cas ^^)
- l'opacité ? J'ai essayé sans, et le problème est toujours présent.
- version de Jquery ? Je viens d'installer la dernière version (1.4.2), le problème est toujours là.

Voici mon code html :

<h2 class="question">Test ?</h2>
<div class="reponse">

	<p>Le test est OK</p>

</div>

Et mon code JS :

$("h2.question").each(function(i){
			
			var question_current = $("h2.question").eq(i);
			var reponse_current = $("div.reponse").eq(i);
			var reponse_current_height = $("div.reponse").eq(i).height();
			var question_current_marginB = $("h2.question").eq(i).css("margin-bottom");
			var opacity_noFocus = 0.3;
			
			reponse_current.hide();
			
			$(question_current).click(function(){
			
				if (reponse_current.css("display") == "none") {
					
					reponse_current.css({ height:reponse_current_height, opacity:1 });
					$("h2.question").css({ opacity: opacity_noFocus });
					question_current.css({ "margin-bottom":0, opacity:1 });
					reponse_current.show(function(){ reponse_current.fadeIn("slow"); });
				
				}
				
				else {
					
					
					reponse_current.animate({ height:"0px", opacity:0 }, function(){ question_current.css({ "margin-bottom":question_current_marginB }); reponse_current.hide(); });
					$("h2.question").css({ opacity: opacity_noFocus });
					question_current.css({ opacity: 1 });
					
				
				}

				
			
			});
		
		});

Merci beaucoup !

EDIT : Le problème est résolu ! C'est les "filter" de IE8 qui posaient problème. J'ai donc rajouté dans l'event click le code suivant :

	$("h2.question").css({ "filter": " " });
	$("div.reponse").css({ "filter": " " });

J'espère que ça en aidera plus d'un en tout cas ^^ Merci quand même
Modifié par SuperSpeedy (24 Aug 2010 - 16:56)