Problema con el explorer al interpretar código

[Polesu]

El código que tengo es el siguiente, no logro encontrar la forma de que funcione en el IE. En los demás navegadores funciona perfectamente como os decia.

Xhtml:

<div id="destacados">

<span><img src="http://www.forosdelweb.com/f53/img/4.jpg" class="opcion0" alt="Imagen de fondo 0" /></span>

<ul>

<li class="foto1">

<span class="opcion1">
<img src="imagenes/portada/destacados/aumento/carloau.jpg" width="600" height="300" alt="carlo" />
</span>
<a href="#">
<img src="imagenes/portada/destacados/carlo.jpg" width="200" height="100" alt="carlo" />
</a>
</li>

<li class="foto2">

<span class="opcion2">
<img src="imagenes/portada/destacados/aumento/carlodosau.jpg" width="660" height="300" alt="toreno" />
</span>
<a href="#">
<img src="imagenes/portada/destacados/toreno.jpg" width="200" height="100" alt="toreno" />
</a>
</li>

<li class="foto3">

<span class="opcion3">
<img src="imagenes/portada/destacados/aumento/carlotresau.jpg" width="600" height="300" alt="lores" />
</span>
<a href="#">
<img src="imagenes/portada/destacados/lores.jpg" width="200" height="100" alt="carlo">
</a>
</li>

</ul>

</div>

CSS:

#destacados * {
outline: 0;
margin: 0;
padding: 0;
}

#destacados {
margin: 10px auto 0;
width: 660px;
position: relative;
height: 300px;
border: solid 1px #000;
}

#destacados ul {
list-style-type: none;
position: absolute;
bottom: 10px;
left: 20px;
}

#destacados li {
display: block;
width: 200px;
height: 100px;
position: absolute;
z-index: 1;
}

#destacados .foto1, .foto2, .foto3 {
bottom: 0;
}

#destacados .foto1 {
z-index: 6;
}

#destacados .foto2 {
left: 210px;
z-index: 5;
}

#destacados .foto3 {
left: 420px;
z-index: 4;
}

#destacados span.opcion1, span.opcion2, span.opcion3 {
width: 660px;
position: absolute;
height: 300px;
top:-190px;
z-index: 0;
display: none;
}

#destacados span.opcion1 {
left:-20px;
}

#destacados span.opcion2 {
left:-230px;
}

#destacados span.opcion3 {
left:-440px;
}

#destacados span img {
width: 660px;
height: 300px;
}

#destacados a {
border: 1px solid #f00;
display: block;
width: 100%;
height: 100%;
position: absolute;
background-color: #399;
z-index: 10;
}

#destacados li:hover {
z-index: 0;
}

#destacados li:hover a {
background-color: #366;
z-index: 0;
}

#destacados li:hover span {
display: block;
z-index: 0;
}