0

它是一个类似这样的网格结构内容：

<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 会在相邻的网格框下方弹出悬停的框，此时它应该是反式的。有什么好的建议如何解决吗？

在此处输入图像描述

4

2 回答 2

2

当我在 Ubuntu 上工作时，我无权访问任何版本的 IE 来测试这个。

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

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

于 2012-12-11T19:01:03.000 回答
1

添加这个：

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

由于 IE7 对 z 索引非常严格。拿你.list-lot-item来说，它们都具有相同的 z-index 值（这没什么），所以无论哪个最后出现在前面的值之上。而且他们不能脱离父母的秩序。

以元素 A 和 B 为例，它们的 z-index 分别为 1 和 2，A 的任何子元素，无论 z-index 在 B 下出现多高。IE7/8 对此非常严格。

JSFiddle

于 2012-12-11T19:08:41.003 回答