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 +中运行完美，但我们的老朋友IE7却很弱。 请尝试在兼容模式下查看：

现场演示

IE7应该是Visa-verse时，将其悬停的框弹出相邻的网格框下方。 有什么好的建议如何解决？

Answer 1

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

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

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

Answer 2

添加：

#gridBlock .list-lot-item:hover {
   z-index:200;   
}

由于IE7对z索引非常严格。 将您的.list-lot-item都具有相同的z-index值（这没什么），所以无论哪个倒数都在较早的那个值的顶部。 他们不能脱离父母的命令。

取z索引分别为1和2的元素A和B，A的任何子元素，无论z索引在B下出现的高度如何。IE7/ 8对此都非常严格。

JSFiddle