z-index css弹出框和ie7

Question

我有一些 div 框，当悬停时应该显示一个语音框。 有了 jQuery 和 CSS，一切都不是太难。

然而，弹出语音出现在 IE7 中的相邻 div 下 - 我无法使其出现在其下方（参见截图）。

我尝试在不同的地方使用 z-index 但没有成功。

FF 替代文本 http://img134.imageshack.us/img134/5314/63386894.png< /a> IE7 替代文本 http://img396.imageshack.us/img396/9329/95483890.png< /a>

HTML

<div class="boardshot_list">
    {% for ... %}

    <span class="img_box">
        <a  href="/site_media/xxx" target="_blank">
            <img class="trigger" src="xxx" alt="{{ item.title }}" />
        </a>

  <div class="container_speech_box popup">
   <div class="two">
    <b class="tl"><b class="tr"></b></b>
     <p>
     blabla
     </p>
    <b class="bl"></b><b class="br"><b class="point"></b></b>
   </div>
  </div>

 </span>


    {% endfor %}

    </div>

CSS

div.boardshot_list span.img_box {
 display:block;
 width:220px;
 height:180px;
 float: left;
 margin: 0 10px 10px 0;
 position: relative;
}
img.trigger{
 border:1px solid #373743;
}
div.popup
{
    display: none; 
    position: absolute; 
 z-index: 50;
}

/* POPUP rounded box */
.container_speech_box div:after {content: "."; display: block; height:11px; clear:both; visibility:hidden;}
.container_speech_box div {width:300px; height:auto; font-family:verdana; font-size:11px;}
b.tl {display:block; width:300px; height:8px; font-size:1px;}
b.tr {display:block; width:292px; height:8px; font-size:1px; float:right;}
b.bl {display:block; width:8px; height:8px; font-size:1px; float:left;}
b.br {display:block; width:292px; height:8px; font-size:1px; float:right; position:relative;}
b.point {display:block; font-size:1px; width:25px; height:14px;}
.container_speech_box div p {padding:8px; margin:0; border:3px solid #4f5b69; border-width:0 3px; text-align:justify;}




div.two b.tl {background:url(/site_media/images/top_left2.gif) top left no-repeat;}
div.two b.tr {background:url(/site_media/images/top_right2.gif) top right no-repeat;}
div.two p {background:#fff;}
div.two b.bl {background:url(/site_media/images/bottom_left2.gif) top left no-repeat;}
div.two b.br {background:url(/site_media/images/bottom_right2.gif) top right no-repeat;}
div.two b.point {background:url(/site_media/images/point2.gif) top left no-repeat; margin:5px 0 0 125px;}


/* end popup table */

div.boardshot_list {
 width: 700px;
 clear: left;
 min-height: 80px;

}
div.boardshot_list .memo_id {
 padding-left: 10px;
 position: relative;
 float:right;
 color:#60564d;
 font-size: 25px;
 padding-top: 20px;
 width: 50px;
 top: 30px;
 left: 10px;
 font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
}

div.boardshot_list.even {
 background-color: #f3f5f6;

}

div.boardshot_list .title span{
 color: #bbb;
 font-weight: normal;
}

div.boardshot_list .img img {
 border:1px solid #373743;
}

JS

 <script type="text/javascript">
    $(document).ready(function(){

 $('.img_box').each(function () {
     // options
     var distance = 10;
     var time = 250;
     var hideDelay = 50;
     var hideDelayTimer = null;

     // tracker
     var beingShown = false;
     var shown = false;

     var trigger = $('.trigger', this);
     var popup = $('.popup', this).css('opacity', 0);

     // set the mouseover and mouseout on both element
     $([trigger.get(0), popup.get(0)]).mouseover(function () {
       // stops the hide event if we move from the trigger to the popup element
       if (hideDelayTimer) clearTimeout(hideDelayTimer);

       // don't trigger the animation again if we're being shown, or already visible
       if (beingShown || shown) {
         return;
       } else {
         beingShown = true;
         // reset position of popup box
         popup.css({
           top: -10,
           left: 20,
           display: 'block' // brings the popup back in to view
         })

         // (we're using chaining on the popup) now animate it's opacity and position
         .animate({
           top: '-=' + distance + 'px',
           opacity: 0.9
         }, time, 'swing', function() {
           // once the animation is complete, set the tracker variables
           beingShown = false;
           shown = true;
         });
       }
     }).mouseout(function () {
       // reset the timer if we get fired again - avoids double animations
       if (hideDelayTimer) clearTimeout(hideDelayTimer);

       // store the timer so that it can be cleared in the mouseover if required
       hideDelayTimer = setTimeout(function () {
         hideDelayTimer = null;
         popup.animate({

           opacity: 0
         }, time, 'swing', function () {
           shown = false;
           popup.css('display', 'none');
         });
       }, hideDelay);
     });
   });
});


    </script>

Answer 1

我认为这是由于 Internet Explorer 中的 z-index 错误造成的。 定位元素（即具有除static之外的position的元素）建立它们自己的堆叠上下文。

http://www.quirksmode.org/bugreports/archives/2006/ 01/Explorer_z_index_bug.html

根据我的经验，就好像所有 div.boardshot_list span.img_box 的 z 索引为 0，并且每个元素内的元素div.boardshot_list span.img_box 的 z-index 为 0.1、0.2 等，而不是1 和 2。

您应该能够通过将包含可见弹出窗口的 span.img_box 的 z-index 设置为 1 来解决该问题，如下所示：

// reset position of popup box
popup.css({
    top: -10,
    left: 20,
    display: 'block' // brings the popup back in to view
})

$(this).css('z-index', '1');

不要忘记当弹出窗口消失时将其重置为0。

Answer 2

这可能是因为不同浏览器中的多个类（.container_speech_box 和 .popup）样式解析存在冲突。 尝试将 .popup div 包裹在 .container_speech_box 周围。