CSS à faire fonctionner sous IE10/11 ET IE8

**Zebulon777** · 04/12/2014, 15h27

Bonjour tout le monde,

j'ai créé une application qui utilise le CSS3 / HMTL5 car au départ on m'avait dit que tous les utilisateurs allaient utiliser IE10 au minimum, mais voila, il s'avère qu'il n'en est rien et en fait beaucoup utilise encore IE8 !

Bref, il n'y a que 3 morceaux qui posent problème.
J'espère que vous pourrez m'aider à les faire fonctionner sous IE8 et IE10/11.

Ce qui ne fonctionne pas en HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
 
<span class="Effet3D3">Auto-Information : </span>
<label id="sliderLabel"> 
	<input id="CB_AutoInfo" type="checkbox" onclick="Trt_AutoInfo('OUI')"/> 
	<span id="slider"> 
		<span id="sliderOn">OUI</span> 
		<span id="sliderOff">NON</span> 
		<span id="sliderBlock"></span> 
	</span> 
</label>

Ce qui ne fonctionne pas en JS (Je pense que c'est le même problème qu'au dessus, mais créé dynamiquement) :

Code javascript :

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
 
G_NbINPUT = G_NbINPUT + 1;
WId2 = "Input" + G_NbINPUT;
WLigne = "<tr><td width='"+WTaille2+"'>";
WLigne = WLigne + WLib2 + "</td>";
WTaille = 100 - parseInt(WTaille2) + "%";
WLigne = WLigne + "<td colspan='4' width='" + WTaille + "'>";
WRadio1 = $(this).next('ZONE_SAISIE').find('TYPE').attr('RADIO1');
WRadio2 = $(this).next('ZONE_SAISIE').find('TYPE').attr('RADIO2');
WRadio3 = $(this).next('ZONE_SAISIE').find('TYPE').attr('RADIO3');
WLigne = WLigne + "<input type='radio' id='C_Qgo1' name='" + WId2 + "' value='" + WRadio1 +"' checked />";
WLigne = WLigne + "<label for='C_Qgo1'>" + WRadio1 + "</label>&nbsp;&nbsp;";
WLigne = WLigne + "<input type='radio' id='C_Qgo2' name='" + WId2 + "' value='" + WRadio2 + "' />";
WLigne = WLigne + "<label for='C_Qgo2'>" + WRadio2 + "</label>&nbsp;&nbsp;";
WLigne = WLigne + "<input type='radio' id='C_Qgo3' name='" + WId2 + "' value='" + WRadio3 + "' />";
WLigne = WLigne + "<label for='C_Qgo3'>" + WRadio3 + "</label>";
var WInfo = "&nbsp;<span class='" + G_CLASSE_INFO + "'> (Choisissez une option) </span>";
WLigne = WLigne + WInfo;
WLigne = WLigne + "</td></tr>";
$('#'+WNomTAB).append($(WLigne));

Le CSS concerné :

Code css :

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 
#sliderLabel {
    border:1px solid #a2a2a2;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    cursor:pointer;
/*    display:block;*/
	display:inline-block; /* Permet de mettre le titre et le slider sur la même ligne */ 
	vertical-align:-60%; /* Permet d'avoir un déclage pour le centrage vertical du titre du slider */
    height:30px;
    overflow:hidden;
    position:relative;
    width:100px;
}
 
#sliderLabel input {
    display:none;
}
 
#sliderLabel input:checked + #slider {
    left:0;
}
 
#slider {
    left:-50px;
    position:absolute;
    top:0;
    -webkit-transition:left .25s ease-out;
    -moz-transition:left .25s ease-out;
    -o-transition:left .25s ease-out;
    -ms-transition:left .25s ease-out;
    transition:left .25s ease-out;
}
 
#sliderOn,
#sliderBlock,
#sliderOff {
    display:block;
    font-family:arial,verdana,sans-serif;
    font-weight:bold;
    height:30px;
    line-height:30px;
    position:absolute;
    text-align:center;
    top:0;
}
 
#sliderOn {
    background:#3269aa;
    background:-webkit-linear-gradient(top,#3269aa 0%,#82b3f4 100%);
    background:-moz-linear-gradient(top,#3269aa 0%,#82b3f4 100%);
    background:-o-linear-gradient(top,#3269aa 0%,#82b3f4 100%);
    background:-ms-linear-gradient(top,#3269aa 0%,#82b3f4 100%);
    background:linear-gradient(top,#3269aa 0%,#82b3f4 100%);
    color:white;
    left:0;
    width:54px;
}
 
#sliderBlock {
    border:1px solid #a2a2a2;
    background:#d9d9d8;
    background:-webkit-linear-gradient(top,#d9d9d8 0%,#fcfcfc 100%);
    background:-moz-linear-gradient(top,#d9d9d8 0%,#fcfcfc 100%);
    background:-o-linear-gradient(top,#d9d9d8 0%,#fcfcfc 100%);
    background:-ms-linear-gradient(top,#d9d9d8 0%,#fcfcfc 100%);
    background:linear-gradient(top,#d9d9d8 0%,#fcfcfc 100%);
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    height:28px;
    left:48px;
    width:50px;
}
 
#sliderOff {
    background:#f2f3f2;
    background:-webkit-linear-gradient(top,#8b8c8b 0%,#f2f3f2 50%);
    background:-moz-linear-gradient(top,#8b8c8b 0%,#f2f3f2 50%);
    background:-o-linear-gradient(top,#8b8c8b 0%,#f2f3f2 50%);
    background:-ms-linear-gradient(top,#8b8c8b 0%,#f2f3f2 50%);
    background:linear-gradient(top,#8b8c8b 0%,#f2f3f2 50%);
    color:#8b8b8b;
    left:96px;
    width:54px;
}
 
/* BOUTON OUI / NON  PARTIEL */
 
/*
    body {
    font-family:arial;
}
*/
 
input[type=radio],
input[type=checkbox] {
    display:none;
}
 
input[type=radio] + label,
input[type=checkbox] + label {
    border:1px solid #ccc;
  display: inline-block;
    padding:6px 10px;
    font-size:14px;
    color:#333;
    cursor:pointer;
    background-color:#f5f5f5;
    background-image:linear-gradient(to bottom,#fff,#e6e6e6);
    background-repeat:repeat-x;
    border-color:#e6e6e6 #e6e6e6 #bfbfbf;
    border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-bottom-color:#b3b3b3;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
 
input[type=radio]:checked + label,
input[type=checkbox]:checked + label {
    background-image:none;
    outline:0;
    box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    background-color:#F6E497; /*#FFF168;*/ /*#e0e0e0;*/
}
*{margin:0; padding:0;}
.box{background: red; height: 30px;}

La fonction de traitement du CTRL+DOUBLE CLIC ne fonctionne plus non plus :

Code javascript :

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
 
//-----------------------------------------------------------------------------------------------------
function FonctionDBLCLICK(P_Event) {
	if(P_Event.ctrlKey)
	{
		if (!P_Event.ctrlLeft)
		{
			WChoix = SelectionAerodrome();
			WCookieTXT = WChoix + "###" + window.Form_PotAG.C_Email.value;
			SetCookie("CookiePotAG", WCookieTXT, null);
			WChoix = G_TERRAIN;
			window.location.reload(true);
		};
	};
}
//-----------------------------------------------------------------------------------------------------

Merci d'avance pour l'aide que vous m'apporterez.

**Bovino** · 04/12/2014, 15h44

C'est à nous de deviner ce qui ne fonctionne pas ?

**Zebulon777** · 05/12/2014, 08h25

Oups... Rhooooooo, tu chipotes...

Ce sont les radios boutons créés à base de "Label" et le CTRL+DOUBLECLIC qui ne fonctionnent pas.

Ce qui serait bien ce serait que j'arrive à transformer les radio boutons / label sous forme de CSS / CLASS, pour garder les même qui ont été validés, mais je ne sais pas si c'est possible ?

Pour le double-clic, c'est vrai que ça ne concerne pas le CSS, mais j'ai préféré tout mettre dans la même question.

**Bovino** · 05/12/2014, 08h33

Ah ben oui, c'est clair que je chipote... Tu nous balance 130 LOC de CSS dans le forum CSS pour nous dire qu'au final, ce qui ne fonctionne pas, c'est un truc que CSS ne sait pas gérer parce que ça relève du JavaScript. C'est dingue comme je peux être pointilleux.

**Zebulon777** · 05/12/2014, 09h31

Meuh non, je suis sur que tu vas me trouver LA solution...

Edit : Bah, il me semblait que c'était un problème de CSS, non, je me suis trompé ?

**NoSmoking** · 06/12/2014, 10h26

Bonjour,

Edit : Bah, il me semblait que c'était un problème de CSS, non, je me suis trompé ?

quelque part si quand même car IE8 et CSS3 != compatible (sur énormément de chose).

**Zebulon777** · 08/12/2014, 08h02

Bah voui, apparemment mon problème vient de l'instruction "label" et du CSS qui va avec, est-ce qu'il y a un moyen de la remplacer pour que ça fonctionne sous IE8 ?

Je remets le code concerné ici, si ça peut vous aider à m'aider...

Code html :

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

1
2
3
4
5
6
7
8
9
10
 
<span class="Effet3D3">Auto-Information : </span>
<label id="sliderLabel"> 
	<input id="CB_AutoInfo" type="checkbox" onclick="Trt_AutoInfo('OUI')"/> 
	<span id="slider"> 
		<span id="sliderOn">OUI</span> 
		<span id="sliderOff">NON</span> 
		<span id="sliderBlock"></span> 
	</span> 
</label>

Code css :

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
 
#sliderLabel {
    border:1px solid #a2a2a2;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    cursor:pointer;
/*    display:block;*/
	display:inline-block; /* Permet de mettre le titre et le slider sur la même ligne */ 
	vertical-align:-60%; /* Permet d'avoir un déclage pour le centrage vertical du titre du slider */
    height:30px;
    overflow:hidden;
    position:relative;
    width:100px;
}
 
#sliderLabel input {
    display:none;
}
 
#sliderLabel input:checked + #slider {
    left:0;
}
 
#slider {
    left:-50px;
    position:absolute;
    top:0;
    -webkit-transition:left .25s ease-out;
    -moz-transition:left .25s ease-out;
    -o-transition:left .25s ease-out;
    -ms-transition:left .25s ease-out;
    transition:left .25s ease-out;
}
 
#sliderOn,
#sliderBlock,
#sliderOff {
    display:block;
    font-family:arial,verdana,sans-serif;
    font-weight:bold;
    height:30px;
    line-height:30px;
    position:absolute;
    text-align:center;
    top:0;
}
 
#sliderOn {
    background:#3269aa;
    background:-webkit-linear-gradient(top,#3269aa 0%,#82b3f4 100%);
    background:-moz-linear-gradient(top,#3269aa 0%,#82b3f4 100%);
    background:-o-linear-gradient(top,#3269aa 0%,#82b3f4 100%);
    background:-ms-linear-gradient(top,#3269aa 0%,#82b3f4 100%);
    background:linear-gradient(top,#3269aa 0%,#82b3f4 100%);
    color:white;
    left:0;
    width:54px;
}
 
#sliderBlock {
    border:1px solid #a2a2a2;
    background:#d9d9d8;
    background:-webkit-linear-gradient(top,#d9d9d8 0%,#fcfcfc 100%);
    background:-moz-linear-gradient(top,#d9d9d8 0%,#fcfcfc 100%);
    background:-o-linear-gradient(top,#d9d9d8 0%,#fcfcfc 100%);
    background:-ms-linear-gradient(top,#d9d9d8 0%,#fcfcfc 100%);
    background:linear-gradient(top,#d9d9d8 0%,#fcfcfc 100%);
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    height:28px;
    left:48px;
    width:50px;
}
 
#sliderOff {
    background:#f2f3f2;
    background:-webkit-linear-gradient(top,#8b8c8b 0%,#f2f3f2 50%);
    background:-moz-linear-gradient(top,#8b8c8b 0%,#f2f3f2 50%);
    background:-o-linear-gradient(top,#8b8c8b 0%,#f2f3f2 50%);
    background:-ms-linear-gradient(top,#8b8c8b 0%,#f2f3f2 50%);
    background:linear-gradient(top,#8b8c8b 0%,#f2f3f2 50%);
    color:#8b8b8b;
    left:96px;
    width:54px;
}
 
/* BOUTON OUI / NON  PARTIEL */
 
/*
    body {
    font-family:arial;
}
*/
 
input[type=radio],
input[type=checkbox] {
    display:none;
}
 
input[type=radio] + label,
input[type=checkbox] + label {
    border:1px solid #ccc;
  display: inline-block;
    padding:6px 10px;
    font-size:14px;
    color:#333;
    cursor:pointer;
    background-color:#f5f5f5;
    background-image:linear-gradient(to bottom,#fff,#e6e6e6);
    background-repeat:repeat-x;
    border-color:#e6e6e6 #e6e6e6 #bfbfbf;
    border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-bottom-color:#b3b3b3;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
 
input[type=radio]:checked + label,
input[type=checkbox]:checked + label {
    background-image:none;
    outline:0;
    box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    background-color:#F6E497; /*#FFF168;*/ /*#e0e0e0;*/
}
*{margin:0; padding:0;}
.box{background: red; height: 30px;}

**Zebulon777** · 08/12/2014, 13h34

Bon, j'ai réussit tout simplement en supprimant le CSS correspondant et en supprimant les instruction "label" du code HTML.

Par contre, en IE8, quelqu'un pourrait me dire comment faire une checkbox un peu plus sympa que celle d'origine ?

**Zebulon777** · 09/12/2014, 10h55

Je me réponds à moi même : apparemment, ce n'est pas possible sauf en passant par des images.

CSS à faire fonctionner sous IE10/11 ET IE8

CSS

Discussions similaires

Partager

Partager