Bonjour tout le monde,

Je viens de rencontrer un problème avec IE8 que j'ai essayé de simplifier au maximum pour vous le soumettre.

J'utilise jQuery 1.6.2.

J'ai un plugin foo() qui prend le texte de l'élément pour l'encadrer par des spans, puis qui masque ces spans avec l'opacité à 0.

Je précise que c'est une version très (très) simplifiée de ce que je cherche à faire et que j'ai besoin des spans et de l'opacité.

Ceci fonctionne très bien sous FF mais IE 8 refuse de me masquer ce texte.

Voici l'exemple complet qui permet de tester :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="../scripts/jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
(function($) {
	$.fn.foo = function() {
		var texte = $(this).html();
		texte = "<span>"+texte+"</span>";
		$(this).html(texte);
 
		$('span').css('opacity','0');
 
	};
 
})(jQuery);
 
 
$(document).ready(function(){
	$('p').foo();
});
</script>
 
</head>
 
<body>
	<p>IE SUCKS</p>
</body>
</html>
Comment contourner ceci ?
Je ne veux pas de visibility:hidden ou de display:none.