javascript - IE7 内容重叠忽略 z-index

Question

是类似这样的网格结构内容:

<div id="gridBlock">
  <div class="list-lot-item">
    <div class="list-lot-item-info">
        <a href="#" class="list-lot-item-col1"></a>
        <div class="list-lot-item-col2"></div>                       
        <div class="list-lot-item-col3"></div>
    </div>
  </div>
  <div class="list-lot-item">....</div>
</div>

像这样使用一些 CSS(但更多在 JSFiddle 中):

#gridBlock .list-lot-item{
 float:left;
 position:relative;
 height:25px;
 width:50px;
 border:1px solid #fff;
 padding-left:2px;
}
#gridBlock .list-lot-item-info,
#gridBlock .list-lot-item-info-on{
 display:block;
 position:absolute;
 background-color:#fff;
 border:1px solid #fff;
 width:50px;
}
#gridBlock .list-lot-item-info{
 z-index:199;
}
#gridBlock .list-lot-item-info-on{
 border:1px solid red;
 top:0;
 z-index:200;                            
 position:relative;
 background-color:yellow;
}
#gridBlock .list-lot-item-col2,
#gridBlock .list-lot-item-col3{visibility:hidden;}
#gridBlock .list-lot-item-info-on .list-lot-item-col2,
#gridBlock .list-lot-item-info-on .list-lot-item-col3{visibility:visible;}

对于每个框的“悬停”状态，我应用一个具有更高 z-index 的新“on”类:

$('#gridBlock .list-lot-item').hover(
  function(){$(this).children(0).removeClass("list-lot-item-info");$(this).children(0).addClass("list-lot-item-info-on");},
  function(){$(this).children(0).removeClass("list-lot-item-info-on");$(this).children(0).addClass("list-lot-item-info");}
);

很明显，它在 FF、Chrome、IE8+ 中运行完美，但我们的老 friend IE7 很弱。请尝试在兼容模式下查看:

Live Demo in Action

IE7 在应该是 visa-verse 时弹出相邻网格框下方的悬停框。有什么好的建议可以解决吗？

Answer 1

我在 Ubuntu 上工作时无法访问任何版本的 IE 来测试它。

但是，我的理解是 z-index 取决于 position:absolute;

尝试从 #gridBlock .list-lot-item-info-on 中删除 position:relative;如果这碰巧破坏了您的设计，您也可以用边距重置它。