Icone non visible sur Internet Explorer 9

**Toufik83** · 03/11/2015, 00h17

bonsoir,

j'ai une fenêtre modal générée par (colorbox.js) avec une icone de fermeture en bas.
le problème sur I.E c'est que l'icone s'affiche comme ça Pièce jointe 191662 pourtant sous chrome est firefox s'affiche correctement Pièce jointe 191663.

en jquery j'ajoute cette icone ainsi :

Code :

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

$("#cboxContent").empty().append("<img id='cboxClose' class='imgfermer' alt='fermer'  />");

est-ce que c'est juste la configuration de mon serveur local asp.net qui fait le bug? si je met le site en ligne, l'image sous IE se comportera de la même façon?

**NoSmoking** · 03/11/2015, 11h42

Bonjour,
pour ce genre d'image il n'est peut être pas nécessaire d'avoir justement recours à une image.
exemple :

Code html :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Bouton close sans image</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font-size:100%;
  font: 1em/1.5 Verdana, sans-serif;
}
#main {
  width:60em;
  margin:0 auto;
}
h1, h2, h3 {
  color:#069;
}
.btn_close_popin {
  font-size:1.5em;
  font-weight:bold;
  color:#fff;
 
  padding:.125em;
  width:1em;
  height:1em;
  line-height:1em;
  text-align:center;
 
  border:.125em solid #fff;
  border-radius:50%;
  background:#f00;
  box-shadow:1px 1px 5px #888;
  cursor:pointer;
}
.btn_close_popin:hover {
  color:#f00;
  background:#fff;
  border-color:#f00;
  box-shadow:1px 1px 10px #f00;
}
.btn_close_popin:before {
  content:'\002716';
}
</style>
</head>
<body>
<div id="main">
  <h1>Bouton close sans image</h1>
  <div class="btn_close_popin"></div>
</div>
</body>
</html>

Sinon je dirais que tu as un problème de format de l'image.

**Toufik83** · 03/11/2015, 12h42

Bonjour,NoSmoking
je vous signale que l'image est en format png (annimée) et ses propriétés css sont définies dans le css approprié a colorbox.js comme ça :

Code css :

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

1
2
 
#cboxClose{position:absolute; bottom:0; right:0; background:url(../image/controls.png) no-repeat -25px 0;  width:25px; height:25px; text-indent:-9999px;}

j'ai fais plusieurs recherches sur les forums et tout le monde parle de SVG, j'ai même telechargé un logiciel qui convert les png en svg mais je sais pas franchement si je suis vers le bon chemin ou non.

**NoSmoking** · 03/11/2015, 14h19

...en jquery j'ajoute cette icone ainsi :

pourquoi ajouter un élément qui est géré par le plugin ?

...est en format png (annimée)

non c'est sur base d'image sprite !

Code css :

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

1
2
3
#cboxClose:hover {
    background-position: -25px -25px;
}

Testé sous IE8, j'ai pas mieux sous la main, pas rencontré de soucis d'affichage de l'image.

**Toufik83** · 03/11/2015, 15h20

justement, j'utilise Ajax pour afficher mon résultat dans la fenêtre modal, le conteneur HTML qui reçoit le résultat d'ajax s'appelle #cboxContent et c'est lui qui contient l'image de fermeture.

quand je fais

Code jquery :

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

$("#cboxContent").empty()

il vide tout ce qu'il y a dedans y compris l'image, c'est pour cela que je l'ajoute encore une fois puisque elle a déja été effacé par

Code jquery :

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

$("").empty()

Code jquery :

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
$.ajax({
                    type: "POST", contentType: "application/json; charset=utf-8",
                    url: "../GestionCatego/Default.aspx/Editer",
                    data: JSON.stringify(donner),
                    dataType: "json",
                    cache: false,
                    success: function (msgE) {
                        for (var i = 0; i < msgE.d.length; i++) {
                            html += "<a id='Titre'>" + msgE.d[i].Titre + "</a><br/>";
                            html += "<a id='image'><img alt='' style='width:13em;height:13em' src='../photos/" + msgE.d[i].Image + "' /></a><br/>";
                            html += "<a id='date'>" + msgE.d[i].Date + "</a>";
                        }
                        //$.colorbox({ open: true });
                        $(this).colorbox({ open: true, inline: true, width: "50%", height: "50%", href: parseInt($(this).attr("id")) });
                        $("#colorbox").show("slow");
                        $("#cboxContent").empty().append("<img id='cboxClose' class='imgfermer'  alt='fermer'  />");
                        
                        $("#cboxClose").on("click", function () {
                            $("#colorbox,#cboxOverlay").hide("slow");
                        });
                        $("#cboxContent").append(html);
                    } //fin success

                });

**NoSmoking** · 03/11/2015, 15h33

...justement, j'utilise Ajax pour afficher mon résultat dans la fenêtre modal

as tu regardé l'exemple Outside HTML (Ajax) ?

Icone non visible sur Internet Explorer 9

jQuery

Vue hybride

Discussions similaires

Partager

Partager