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 ?

Encore et toujours souci de transparence avec IE

jQuery

Vue hybride

Discussions similaires

Partager

Partager