Je m'arrache les cheveux avec IE8. La gestion du z-index est complètement incohérente. Sur Chrome, firefox et Safari quand je passe la souris sur les zones bloc1, bloc2, bloc3 et bloc4, je fais correctement réapparaître des éléments planqués (et positionnés en absolu). Sur IE8, les éléments réapparaissent, mais passent en dessous des zones bloc1, bloc2, bloc3 et bloc4. C'est à se taper la tête sur les murs...
Voilà le code :
Voilà le code :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title><style type="text/css">
* {margin:0; padding:0}
#conteneur {
}
#conteneur ul li {
background: #F33;
float: left;
height: 50px;
width: 190px;
margin-top: 10px;
margin-right: 10px;
list-style: none;
position: relative;
display: block;
}
#conteneur ul li table {
display: none;
position: absolute;
left: 30px;
top: 15px;
background: #C96;
}
#conteneur ul li:hover table {
display:block;
z-index:1;
}
#conteneur ul li table tr {
height:90px
}
</style>
</head>
<body>
<div id="conteneur">
<ul>
<li>bloc1
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>1000</td>
<td>1000</td>
</tr>
<tr>
<td>1000</td>
<td>1000</td>
</tr>
<tr>
<td>1000</td>
<td>1000</td>
</tr>
</table>
</li>
<li>bloc2
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>2000</td>
<td>2000</td>
</tr>
<tr>
<td>2000</td>
<td>2000</td>
</tr>
<tr>
<td>2000</td>
<td>2000</td>
</tr>
</table>
</li>
<li>bloc3
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>3000</td>
<td>3000</td>
</tr>
<tr>
<td>3000</td>
<td>3000</td>
</tr>
<tr>
<td>3000</td>
<td>3000</td>
</tr>
</table>
</li>
<li>bloc4
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>4000</td>
<td>4000</td>
</tr>
<tr>
<td>4000</td>
<td>4000</td>
</tr>
<tr>
<td>4000</td>
<td>4000</td>
</tr>
</table>
</li>
</ul>
</div>
</body>
</html>