Z-index interrotto in IE8?

Questo codice funziona in tutti gli altri browser che ho provato, ad eccezione di IE8.Z-index interrotto in IE8?

IE8 sembra ignorare lo z-index e il pop-up diventa pop-under.

È nel posto giusto, esegue solo il rendering sotto l'anteprima.

Chiunque?

Grazie!

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; 
}

fonte

2009-08-17 Anonymous

La risposta più semplice è quello di aggiungere un valore z-index che è maggiore del valore .thumbnail:hover allo stato presso l'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; 
}

fonte

2009-08-17 20:36:08

grazie - risolve il problema! –

Se ho capito bene, si desidera che il span per mostrare sopra l'elemento contrassegnato come miniatura. Non è stato specificato lo z-index per l'elemento span. Ecco un esempio di lavoro:

 
<!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>

fonte

2009-08-17 20:46:08

Il modo per risolvere questo problema è con l'aggiunta di una classe per l'immagine di anteprima in questo modo:

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

fonte

2010-01-06 15:52:02 Chris

Mettere queste righe in testa page

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

your_faulty_div è il div che si comporta male a causa del bug di zE di IE.

Funziona senza problemi, lo uso in tutti i miei progetti in cui ho posizionato elementi sovrapposti.

fonte

2010-05-15 08:02:46

Cosa intendi per comportamento anomalo? È il div che dovrebbe andare in cima, o quello che dovrebbe andare dietro? Dandogli un'opacità pari a 0 lo nasconderai tutti insieme? Ho problemi con un problema simile me stesso. Grazie! – cederlof

Z-index interrotto in IE8?

risposta

Problemi correlati