Affichage différent entre IE10 et IE8

**Zebulon777** · 10/03/2015, 11h07

Bonjour tout le monde,

je me heurte à un problème surement tout bête, mais je dois passer à côté.

Pour rappel, nous utilisons Internet Explorer sous forme d'interpréteur pour nos applications.

Sur la machine de développement, il y a IE11 mais les utilisateurs internes, chez nous, sont sous IE8.
Donc au début des pages HTML, je mets le ETA qui va bien :

Code html :

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

1
2
3
4
5
6
7
<!DOCTYPE HTML><!--Le DOCTYPE pour HTML5-->
<!--<!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>
<TITLE>PotAG</TITLE>
<!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />-->
<META http-equiv="x-ua-compatible" content="IE=8">

Mais je n'arrive pas à avoir le même rendu :
Sur EI11 (ou 10) :
Nom : PAG01.png
Affichages : 134
Taille : 11,4 Ko

Sur IE8 :

Nom : PAG02.png
Affichages : 135
Taille : 146,4 Ko

Est-ce que ça pourrait être un problème de résolution d'écran ou de police et comment faire pour corriger le problème ?

Merci d'avance pour votre aide.

Invité · 11/03/2015, 06h51

Bonjour,
sans vouloir m'avancer, je dirais que c'est lié :

au code CSS (que tu ne montres pas)
lui-même associé au code HTML (que tu ne montres pas non plus)

A moins que ce ne soit un problème de choix dans la date ?

**Bovino** · 11/03/2015, 08h01

un problème de choix dans la date ?

Personnellement, je l'ai réglé pas plus tard qu'hier soir celui-là...

**Zebulon777** · 11/03/2015, 08h34

LOL, ok, celle-là, je ne l'ai pas volé...
Donc, je retire mon doigt et...

Voici le CSS :

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
 
/* TABLE CALENDRIER */
.T_Calendrier {
	border:1px solid #ffffff;
	margin:0px;
	padding:0px;
	margin-bottom:20px;/*permet d'avoir un espace entre chaque tableau*/
	width:90%;
	box-shadow: 10px 10px 5px #888888;
 
	-moz-border-radius-bottomleft:25px;
	-webkit-border-bottom-left-radius:25px;
	border-bottom-left-radius:25px;
 
	-moz-border-radius-bottomright:25px;
	-webkit-border-bottom-right-radius:25px;
	border-bottom-right-radius:25px;
 
	-moz-border-radius-topright:25px;
	-webkit-border-top-right-radius:25px;
	border-top-right-radius:25px;
 
	-moz-border-radius-topleft:25px;
	-webkit-border-top-left-radius:25px;
	border-top-left-radius:25px;
 
	behavior: url(./PIE-1.0.0/PIE.htc);
}
 
.T_Calendrier table{
    border-collapse: collapse;
    border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}
 
/*
.T_Calendrier tr:hover td{
	background-color:#888888;
}
*/
 
.T_Calendrier td:hover{
	background-color:#cccccc;/*#888888;*/
	cursor:default; /*Curseur flèche au survol du tableau*/
}
 
.T_Calendrier td{
	border:1px solid #ffffff;
	vertical-align:middle;
/*	background-color:#6699cc;*/
	border-width:0px 1px 1px 0px;
	text-align:center;
	padding:3px;
	font-size:12px;
	font-family:Arial;
	font-weight: bold;
	color:#000000;
	width:50px;
}
 
.T_Calendrier tr:last-child td{
	border-width:0px 1px 0px 0px;
}
 
.T_Calendrier tr td:last-child{
	border-width:0px 0px 1px 0px;
}
 
.T_Calendrier tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
 
.T_Calendrier tr:first-child td{
	border:0px solid #ffffff;
 
	background-color:#003366;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:21px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
 
.T_Calendrier tr:first-child:hover td{
	background-color:#003366;
}
 
.T_Calendrier tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
 
.T_Calendrier tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}

Et voici le code Javascript qui créé ce trableau :

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
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
 
function ChargementTableauMois() {
	ActiverDesactiverSaisie("DESACTIVER", "VALID", "MENS", "QUOT", "OUI", "OUI");
	G_CASE_ROUGE = "";
	G_NUM_CASE_ROUGE = 0;
	WCoulFond = "";
	WDivTAB_MOIS_00 = document.getElementById("DivTAB_MOIS_00");
	WTable = document.createElement("table");
	WTable.setAttribute("id", "ID_TAB_MOIS");
	WTable.setAttribute("class", "T_Calendrier"); // Définir la class pour les tables
	WIdTable = "ID_TAB_MOIS";
	var elementExists = document.getElementById(WIdTable);
	if (elementExists != null)
	{
		var enfant = document.getElementById(WIdTable);
		WDivTAB_MOIS_00.removeChild(enfant);
	};
	WDivTAB_MOIS_00.appendChild(WTable);
	WNumMois = window.Form_PotAG.Liste_Mois.selectedIndex + 1;
	WAnnee =  window.Form_PotAG.Liste_Annee.value;
	WNomMois = Trt_Mois(window.Form_PotAG.Liste_Mois.value);
	WNbJourMois = RecupNbJourDuMois(WNumMois, WAnnee);
	$("#" + WIdTable).append($("<tr ><td colspan='" + WNbJourMois + "' align='center'>" + WNomMois + " " + WAnnee + "</td></tr>"));	
	WLigneTab = "";
	WNbJ = 1
	while (WNbJ <= WNbJourMois)
	{
		if (WNumMois < 10)
		{
			WMois2 = "0" + WNumMois;
		}
		else
		{
			WMois2 = WNumMois.toString();
		};
		if (WNbJ < 10)
		{
			WJour2 = "0" + WNbJ;
		}
		else
		{
			WJour2 = WNbJ.toString();
		};
		WAnnee2 = WAnnee.toString();
		WDateTXT = WAnnee2 + "_" + WMois2 + "_" + WJour2;	
		WNomFichierTXT = WDateTXT + "_" + G_TERRAIN + "_potag.txt";
		WVerifFichier = G_AEROD + "/" + WNomFichierTXT;
		G_TOTAL = "";
		if (G_ACTX_FSO.FileExists(WVerifFichier))
		{
			WCoulFond = G_COUL_FOND_TAB_1; //"#98DB9C"; //#C4FCCA//"#98DB9C";
// Récupérer AUTO-INFO et TOTAL
			RecupData(WVerifFichier);
		}
		else
		{
			WCoulFond = G_COUL_FOND_TAB_2; //"#FADFB4"; //"#C72B10";
		};
		if (WNbJ == 1)
		{
			WLigneTab = WLigneTab + "<tr>";
		};
		if (WNbJ == 11)
		{
			WLigneTab = WLigneTab + "</tr>";
			WLigneTab = WLigneTab + "<tr>";
		};
		if (WNbJ == 21)
		{
			WLigneTab = WLigneTab + "</tr>";
			WLigneTab = WLigneTab + "<tr>";
		};
		if (WNbJ == 31)
		{
			WLigneTab = WLigneTab + "</tr>";
			WLigneTab = WLigneTab + "<tr>";
		};
		G_TAB_FICHIER[WNbJ] = WVerifFichier;
		G_TAB_COUL_CELL[WNbJ] = WCoulFond;
		WIdCell = "IDCell" + WNbJ;
		WLigneTab = WLigneTab + "<TD id='" + WIdCell + "' align='center' ";
		WLigneTab = WLigneTab + " BGCOLOR='" + WCoulFond + "'";
		WOnClick = "ChargementFichier(" + WNbJ + ")";
		WLigneTab = WLigneTab + " onClick='" +  WOnClick + "' ";
		if (G_TOTAL == "(NC)")
		{
			WClasseInfo = "InfoGris";
		}
		else
		{
			WClasseInfo = "InfoRouge";
		};
		WLigneTab = WLigneTab + ">" + WNbJ + "<br><span class='" + WClasseInfo + "'>" + G_TOTAL + "</span>";
		WLigneTab = WLigneTab + "</TD>";
		WNbJ = WNbJ + 1;
	};
	$('#'+WIdTable).append($(WLigneTab));
 
	window.Form_PotAG.CB_AutoInfo.checked = false;
	Trt_AutoInfo("NON");
}