[ie9] Problème avec :hover et :active

Bonjour,

Je suis actuellement entrain de réaliser un nouveau site et comme d'habitude je passe faire un tour sur Internet explorer afin de repérer des bogs lors du développement.

Mon problème est qu'actuellement ma page est compatible avec tous les autres navigateurs que je cible sauf ie9:

- L'image de mon lien s'affiche correctement (normal / hover/ active )sur les navigateurs modernes mais sur ie l'hover et l'active n'affiche plus d'image.

Mon code.

<a id="logo-container" href="index.html" title="Accueil"></a>

	a#logo-container {
		float: left;
		width: 9em;
		height: 3.8em;
		background: url("../img/layout.png") no-repeat scroll 20px 19px;
		border-left: 1px solid #e0e0e3;
		border-right: 1px solid #e0e0e3;
	}
	
	a#logo-container:hover {
		/*	background-color: #d6d6d8;	*/
		border-left: 1px solid #cacaca;
		border-right: 1px solid #cacaca;
		border-bottom: 1px solid #cacaca;
		-webkit-box-shadow: 0px 0px 0px 1px #f1f1f1;
		-moz-box-shadow: 0px 0px 0px 1px #f1f1f1;
		box-shadow: 0px 0px 0px 1px #f1f1f1;
		
		background: #ededef; /* Old browsers */
		background: url("../img/layout.png") no-repeat scroll 20px 19px, -moz-linear-gradient(top,  #ededef 0%, #e0e0e3 100%); /* FF3.6+ */
		background: url("../img/layout.png") no-repeat scroll 20px 19px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededef), color-stop(100%,#e0e0e3)); /* Chrome,Safari4+ */
		background: url("../img/layout.png") no-repeat scroll 20px 19px, -webkit-linear-gradient(top,  #ededef 0%,#e0e0e3 100%); /* Chrome10+,Safari5.1+ */
		background: url("../img/layout.png") no-repeat scroll 20px 19px, -o-linear-gradient(top,  #ededef 0%,#e0e0e3 100%); /* Opera 11.10+ */
		background: url("../img/layout.png") no-repeat scroll 20px 19px, -ms-linear-gradient(top,  #ededef 0%,#e0e0e3 100%); /* IE10+ */
		background: url("../img/layout.png") no-repeat scroll 20px 19px, linear-gradient(top,  #ededef 0%,#e0e0e3 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededef', endColorstr='#e0e0e3',GradientType=0 ); /* IE6-9 */
	}

	a#logo-container:active {
		/*	background-color: #d6d6d8;	*/
		border-left: 1px solid #cacaca;
		border-right: 1px solid #cacaca;
		border-bottom: 1px solid #cacaca;
		-webkit-box-shadow: 0px 0px 0px 1px #f1f1f1;
		-moz-box-shadow: 0px 0px 0px 1px #f1f1f1;
		box-shadow: 0px 0px 0px 1px #f1f1f1;
		
		background: #e0e0e3; /* Old browsers */
		background: url("../img/layout.png") no-repeat scroll 20px 19px, -moz-linear-gradient(top,  #e0e0e3 0%, #ededef 100%); /* FF3.6+ */
		background: url("../img/layout.png") no-repeat scroll 20px 19px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e3), color-stop(100%,#ededef)); /* Chrome,Safari4+ */
		background: url("../img/layout.png") no-repeat scroll 20px 19px, -webkit-linear-gradient(top,  #e0e0e3 0%,#ededef 100%); /* Chrome10+,Safari5.1+ */
		background: url("../img/layout.png") no-repeat scroll 20px 19px, -o-linear-gradient(top,  #e0e0e3 0%,#ededef 100%); /* Opera 11.10+ */
		background: url("../img/layout.png") no-repeat scroll 20px 19px, -ms-linear-gradient(top,  #e0e0e3 0%,#ededef 100%); /* IE10+ */
		background: url("../img/layout.png") no-repeat scroll 20px 19px, linear-gradient(top,  #e0e0e3 0%,#ededef 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e3', endColorstr='#ededef',GradientType=0 ); /* IE6-9 */
	}

J'ai essayé plusieurs directions comme l'ajout de meta dédié à ie9.

<!-- IE9 Standards mode beginning -->
		<meta http-equiv="X-UA-Compatible" content="IE=9">
	<!-- IE9 Standards mode ending -->

<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

Du coté de Js idem, j'ai tenté avec csshover.js mais rien n'y fait.

Merci pour votre attention.

bonjour

j'ai le même problème avec la fonction background. Mes images ne s'affichent pas dans IE9, Outlook 2010 et dans Firefox. Par contre les images s'affichent bien dans Opera.

<table style="background:url(images/header-bg.jpg); background-repeat: no-repeat; background-position: center; background-color: #fffdf9;" width="684" border="0" align="center" cellpadding="0" cellspacing="0">

Si vous avez trouvé une solution, pourriez-vous me la donner ?

D'avance merci !
Cdt
Charlie

Bonjour,

avez-vous une adresse ou on peut voir le site ?
Modifié par Azralth (24 Feb 2012 - 23:01)

Je pense que le filter ne fait pas bon ménage avec le background sous IE (pas testé).

Solution plus largement compatible : imbriquer un span contenant l'image de background et se servir de l'ancre pour le dégradé uniquement.