Background image et Background size - Incompatibilité IE8 / IE9

Bonjour,

Voilà je me permets de poster mon problème après pas mal de recherches.

Mon problème : Un affichage incorrect sur Internet Explorer 7 & 8 (pour IE9 et les autres navigateurs, pas de problème).

La partie qui doit poser problème à mon avis : Utilisation dans le css de l'attribut background-size : contain;.

J'ai cherché des méthodes de contournement sur le net, mais je ne trouve pas comment écrire mon css pour que mon menu s'affiche correctement sur IE7 / IE8.

Voici la partie HTML :

Code:

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
<!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" xml:lang="fr-fr" lang="fr-fr" dir="ltr" >
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="generator" content="Joomla! - Open Source Content Management" />
  <title>Accueil</title>
  <link rel="stylesheet" href="workflow.css" type="text/css" />
</head>
 
<body>
 
	<div id="workflow">
		<ul id="workflow_birt_1">
			<li class="first"/>
			<li id="step_5_1" class="activeStep">
				<a class="link">
					<span class="label">Editeur</span>
				</a>
			</li>
			<li class="between"/>
			<li id="step_4_2" class="">
				<a class="link">
					<span class="label">Redacteur-1</span>
				</a>
			</li>
			<li class="between"/>
			<li id="step_6_3" class="">
				<a class="link">
					<span class="label">Redacteur-2</span>
				</a>
			</li>
			<li class="between"/>
			<li id="step_6_4" class="">
				<a class="link">
					<span class="label">Gestionnaire</span>
				</a>
			</li>
			<li class="last"/>
		</ul>
	</div>
 
</body>
</html>

Et le CSS :

Code:

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
#workflow
{
	width : 100%;
	height : 40px;
	line-height : 40px;
	float : left;
}
 
#workflow ul
{
	display: inline-block;
	list-style-type: none !important;
	height : inherit;
}
 
#workflow ul li
{
	background-image : url(middle.png);
	background-repeat : repeat-x;
	background-size : contain;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='middle.png',sizingMethod='scale');
	display: inline-block;
	text-align : center;
	padding-left : 20px !important;
	padding-right : 10px !important;
	margin-left : -5px !important;
	line-height : inherit !important;
}
 
#workflow ul li.first
{
	background-image : url(start.png);
	background-repeat : no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='start.png',sizingMethod='scale');
	position : absolute;
	height : inherit;
}
 
#workflow ul li.last
{
	background-image : url(end.png);
	background-repeat : no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='end.png',sizingMethod='scale');
	position : absolute;
	height : inherit;
}
 
#workflow ul li.between
{
	background-image : url(between.png);
	background-repeat : no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='between.png',sizingMethod='scale');
	position : absolute;
	height : inherit;
	margin-left : -12px !important;
}
 
#workflow ul li.activeStep
{
 
}
 
#workflow ul li span.label
{
	padding-left : 5px;
	padding-right : 10px;
}
 
#workflow ul li a.link
{
 
}

Les 4 images nécessaires sont en pièce jointe.
Merci beaucoup d'avance de me donner un moyen d'afficher correctement mon menu sur IE7 / IE8.

PS : Pour tester en IE7 / IE8, je switche simplement, à partir de mon IE9, le mode de compatibilité du navigateur.
PS2 : Si ça ne tenait qu'à moi, ça fait longtemps que j'aurais laissé IE7 / IE8 de coté :P, mais cela m'a été demandé par ma boîte pour un client. :(