Encore et toujours souci de transparence avec IE

Satch · 24/08/2011, 16h30

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.

Bovino · 24/08/2011, 16h37

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var texte = $(this).html();
texte = "<span>"+texte+"</span>";
$(this).html(texte);

Je te conseillerais plutôt

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var texte = $(this).html();
texte.wrap('span');

Satch · 25/08/2011, 15h15

Merci, j'en prends note.
Je débute avec jQuery depuis une semaine, je n'ai pas encore les bons réflexes.
Ceci dit, ça ne change rien à mon problème

Shikiryu · 25/08/2011, 17h02

Pas essayé mais je pense que ça vient de la propriété "opacity" qui n'est pas "compris" par IE.

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.test{
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; // IE8
     filter: alpha(opacity=0); // Autre IE
}

Plugin :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$.fn.foo = function() {         
    var texte = $(this).html();        
    texte = "<span>"+texte+"</span>";         
    $(this).html(texte);           
    $('span').addClass('test');     
};

Bovino · 25/08/2011, 17h09

jQuery gère lui-même l'affectation de l'opacité en fonction du navigateur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var texte = $(this).html();
texte.wrap('span');
$(this).find('span').css({opacity: 0});

Satch · 26/08/2011, 08h50

Sauf que dans ce cas ça ne marche pas.
Je viens de me rendre compte que l'opacité ne fonctionne pas avec les élements inline dans IE.

J'ai donc du bidouiller un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
span {
  display:block;
  float:left;
}

pour que ça marche.

Mais je ne suis, mais alors pas du tout satisfait de cette solution.

pour résumer encore plus le problème voici un autre fichier de test qui ne marche pas alors qu'il devrait :

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
<!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>IE really sux !</title>
<script type="text/javascript" src="../scripts/jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
 
	$(document).ready(function(){
		$('span').css('opacity','0');
	});
</script>
 
</head>
 
<body>
	<p><span>IE SUX</span></p>
</body>
</html>

Il semble donc que même jquery ne sache pas mettre l'opacité sur des éléments inline dans IE.

Est-ce impossible ?

25/08/2011, 15h15	#3
Satch Membre éclairé Inscription : mars 2004 Messages : 448 Détails du profil Informations personnelles : Âge : 30 Informations forums : Inscription : mars 2004 Messages : 448 Points : 381 Points : 381	Merci, j'en prends note. Je débute avec jQuery depuis une semaine, je n'ai pas encore les bons réflexes. Ceci dit, ça ne change rien à mon problème __________________ Je sais que désormais vivre est un calembour, La mort est devenue un état permanent, Le monde est aux fantômes, aux hyènes et aux vautours. Moi je vous dis bravo et vive la mort.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email