Z-index uszkodzony w IE8?

Ten kod działa w każdej innej przeglądarce, którą wypróbowałem, z wyjątkiem IE8.Z-index uszkodzony w IE8?

Wygląda na to, że IE8 ignoruje indeks Z, a okno podręczne staje się pop-under.

Jest we właściwym miejscu, wyświetla się pod miniaturą.

Ktoś?

Dzięki!

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

Źródło

2009-08-17 Anonymous

Odpowiedź jest prosta, aby dodać wartość z-index, która jest większa niż wartość do stanu najechania na span.thumbnail:hover.

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

Źródło

2009-08-17 20:36:08

dziękuję - rozwiązuje problem! –

Jeśli dobrze Cię rozumiem, chcesz, aby span wyświetlał się nad elementem oznaczonym jako miniatura. Nie określono elementu z-index dla elementu span. Oto przykład roboczych:

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

Źródło

2009-08-17 20:46:08

Sposobem na rozwiązanie tego problemu jest przez dodanie klasy do miniatury jak ten:

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

Źródło

2010-01-06 15:52:02 Chris

umieścić te linie w głowie strony

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

your_faulty_div to div, który źle się zachowuje z powodu błędu IE z-index.

Działa płynnie, używam go we wszystkich moich projektach, w których pozycjonuję elementy na zakładkę.

Źródło

2010-05-15 08:02:46

Co masz na myśli źle się zachowujesz? Czy to div ma iść na szczyt, czy ten, który ma iść z tyłu? Nadanie jej nieprzezroczystości równej 0 spowoduje ukrycie tego wszystkiego razem? Sam mam podobne problemy z podobnym problemem. Dzięki! – cederlof

Z-index uszkodzony w IE8?

Odpowiedz

Powiązane problemy