Problème de superposition d'éléments sur Firefox et IE

Bonjour à toutes et à tous,

Cela fait bien une semaine que je cherche et tente de réparer un problème d'affichage de superposition d'élément en CSS. Je m'explique : J'affiche sur 'une de mes pages une liste d'affiche de film. Jusque là tout va bien mais, le fait est que je souhaite qu'au survol d'une affiche, le synopsis s'affiche en surimpression sur l'affiche. J'ai codé ce ci :

<li>
	<div class="item">

	<a href="<?php echo $donnees['lien']; ?>"><img class="img" src="<?php echo $donnees['affiche']; ?>" width="185" height="247" /></a>

	<div class="caption" id=<?php echo $id;?>>

   <a  href = "<?php echo $donnees['lien']; ?>" > <?php echo $donnees['Titre'];?> </a>

	<a  href = "<?php echo $donnees['lien']; ?>" ><p> <?php echo $donnees['Synopsis'];?> </p></a>

			</div>
	</div>
</li>

.item {
    width:185px;
    height:247px;       
    margin:5px 5px 5px 0;
   /*overflow:hidden;*/
    /* for child absolute position */
    position:relative;
	z-index: 5;
}

.img {
	
    width:185px;
    height:247px; 
    border:0;
   position:absolute;
	z-index: 5;
}

.caption{
		width:185px;
		height:247px; 
		border:0;
		/*margin:0;*/
		background-color: rgba(240, 239, 232, 0.68);
		color:#fff;
		overflow: hidden;
		font-weight:bold;  
		font-family:arial; 	
		/*text-align: left;*/
		position:absolute;
		display:none;
		filter:alpha(opacity=90);
		-moz-opacity:0.9; 
		-khtml-opacity: 0.9;
		opacity: 0.9;
		z-index: 5;
		}

	.caption a {
		opacity: 1;
		text-align: left;	
		text-decoration:none;
		/* color:#0cc7dd;*/
		color:black;
		font-weight: bold;
		font-size:16px;    
		padding:2px;
		padding-top: 3px;
		display: inherit;
		z-index: 6;
		}

	.caption a:hover{
		opacity: 1;
		text-align: left;
		text-decoration:none;
		/* color:#0cc7dd;*/
		color:black;
		font-weight: bold;
		font-size:16px;    
		padding:2px;
		padding-top: 3px;
		display: inherit;
                z-index: 6;
	}

	.caption p {
		opacity: 1;
		padding:5px;    
		margin:0;
                font-size:13px;
		color: black;
		text-shadow: #FEFEFE 1px 1px, #FEFEFE -1px 1px, #FEFEFE -1px -1px, #FEFEFE 1px -1px;
		font-weight: normal;   
		text-align: left;
		z-index: 6;
		}
		
		.item:hover .caption
		{
			display: inline;
		}

Ce qui marche tout à fait comme il se doit sur google chrome. Sous Mozilla Firefox, il y a un petit bug : en plaçant le curseur de la souris sur la droite d'une affiche, c'est le synopsis de l'affiche de droite qui s'affiche.
Sous IE il y a un bug similaire mais bien plus prononcé et les éléments se déplacent au survol. (lien pour voir de vous même : http://lecinephie.byethost7.com/fantastiques.php )

Je m'en remets donc à vous pour trouver l'origine du problème et le corriger.

Merci de m'avoir lu et de m'avoir consacré de votre temps,

Cordialement,

hharchi9.