Z-index cassé dans IE8?

Ce code fonctionne dans tous les autres navigateurs que j'ai essayés, sauf IE8.Z-index cassé dans IE8?

IE8 semble ignorer l'index z - et le pop-up devient un pop-under.

Il est au bon endroit, rend juste sous la vignette.

Quelqu'un?

Merci!

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

Source

2009-08-17 Anonymous

La réponse simple est d'ajouter une valeur z-index qui est supérieure à la valeur .thumbnail:hover à l'état de vol stationnaire du 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; 
}

Source

2009-08-17 20:36:08

merci - résout le problème! –

Si je vous comprends bien, vous voulez le span pour montrer au-dessus de l'élément marqué comme la vignette. Vous n'avez pas spécifié le z-index pour l'élément span. Voici un exemple de travail:

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

Source

2009-08-17 20:46:08

La façon de résoudre ce problème est en ajoutant une classe à l'image miniature comme ceci:

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

Source

2010-01-06 15:52:02 Chris

Mettez ces lignes dans la tête de la page

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

Votre_faulty_div est la div qui se comporte mal en raison d'un bug d'IE z-index.

Fonctionne bien, je l'utilise dans tous mes projets où j'ai des éléments positionnés qui se chevauchent.

Source

2010-05-15 08:02:46

Que voulez-vous dire se comporter mal? Est-ce le div supposé aller au-dessus, ou celui supposé aller derrière? Lui donner une opacité de 0 va tout cacher ensemble? J'ai des problèmes avec un problème similaire moi-même. Merci! – cederlof

Z-index cassé dans IE8?

Répondre

Questions connexes