Z-index roto en IE8?

Este código funciona en todos los demás navegadores que he probado, excepto IE8.Z-index roto en IE8?

Parece que IE8 ignora el índice Z y la ventana emergente se convierte en un elemento emergente.

Está en el lugar correcto, solo se renderiza debajo de la miniatura.

¿Alguien?

Gracias!

HTML:

<a class="thumbnail" href="#thumb"> 
    <img src="comic_a3_thumb.jpg" height="300" width="212" border="0" 
     style="float:right; margin-top:10px;margin-bottom:10px;" 
     alt="description" /> 
    <span> 
     <img src="/images/comic_a3_popup.jpg" /> 
    </span> 
</a>

CSS:

.thumbnail{ 
    position: relative; 
    z-index: 0; 
} 

.thumbnail:hover{ 
    background-color: transparent; 
    z-index: 50; 
} 

.thumbnail span{ /*CSS for enlarged image*/ 
    position: absolute; 
    background-color: lightyellow; 
    padding: 5px; 
    left: 0px; 
    border: 1px dashed gray; 
    visibility: hidden; 
    color: black; 
    text-decoration: none; 
} 

.thumbnail span img{ /*CSS for enlarged image*/ 
    border-width: 0; 
    padding: 2px; 
} 

.thumbnail:hover span{ /*CSS for enlarged image on hover*/ 
    visibility: visible; 
    top: -140px; /*position where enlarged image should offset horizontally */ 
    left: -500px; 
}

Fuente

2009-08-17 Anonymous

La respuesta sencilla es añadir un valor z-index que es mayor que el valor .thumbnail:hover al estado estacionario de la span.

.thumbnail:hover span{ /*CSS for enlarged image on hover*/ 
    visibility: visible; 
    top: -140px; /*position where enlarged image should offset horizontally */ 
    left: -500px; 
    z-index: 51; 
}

Fuente

2009-08-17 20:36:08

gracias - resuelve el problema! –

Si he entendido bien, desea que el span para mostrar encima del elemento marcado como la uña del pulgar. No ha especificado el z-index para el elemento span. Aquí está un ejemplo de trabajo:

 
<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> 
    <title>Pop-up Test</title> 
    <style type="text/css"> 
     #vbox { 
      border: 1px solid black; 
      height: 200px; 
      position: relative; 
      width: 200px; 
      z-index: 0; 
     } 

     #vbox:hover #hbox { 
      display: block; 
     } 

     #hbox { 
      border: 1px solid blue; 
      display: none; 
      height: 200px; 
      left: 50px; 
      position: relative; 
      top: 50px; 
      width: 200px; 
      z-index: 1; 
     } 
    </style> 
</head> 
<body> 
    <div id="vbox"> 
     <p>Hover over this box to show a hidden "pop-up".</p> 
     <p id="hbox">This box is a pop-up.</p> 
    </div> 
</body> 
</html>

Fuente

2009-08-17 20:46:08

La manera de solucionar este problema es mediante la adición de una clase a la imagen en miniatura de esta manera:

.thumbnail:hover img.thumb {z-index:-50; position:relative;}

Fuente

2010-01-06 15:52:02 Chris

Poner estas líneas en su cabeza página

<!--[if IE]> 
    <style> 
      #your_faulty_div{ 
      background-color:#000; /*any color it doesn't matter*/ 
     filter: alpha(opacity=0); 
     } 
     </style> 
<![endif]-->

your_faulty_div es el div que se está portando mal debido al error IE-index z.

Funciona sin problemas, lo uso en todos mis proyectos en los que he posicionado elementos superpuestos.

Fuente

2010-05-15 08:02:46

¿Qué quiere decir portarse mal? ¿Se supone que el div debe estar arriba, o el que se supone que debe ir detrás? Darle una opacidad de 0 lo ocultará todo junto? Tengo problemas con un problema similar yo mismo. ¡Gracias! – cederlof

Respuesta

Cuestiones relacionadas