代码之家 › 专栏 › 技术社区 › jeroen

在IE8、IE7和可能的IE6中的图像幻灯片放映前获取无序列表

z-index positioning internet-explorer-8 internet-explorer css

jeroen · 技术社区 · 15 年前

我有一个简单的(绝对定位的)图像幻灯片放映,它由几张每隔几秒钟旋转的图像组成。

为了让不同区域的变化图像可以点击,我也有一个无序的列表,包含不同的链接,相对定位,以便使用z索引。

这在Firefox(3.6)、Safari(Windows)和Chrome(Windows)中都可以正常工作。然而,链接似乎消失在IE8和IE7中的图像后面(我还没有在IE6中尝试过…)。

我怎样才能把这张无序的单子放在IE的前面呢? (见下面的代码)

编辑: Link to working page

编辑2: 使用IE8的开发人员工具,我发现当我删除以下内容时,链接可以工作并且位于幻灯片顶部:

.links a { display: block; }

移除的结果 显示:块 我在左上角有5个小的可点击区域覆盖图像。当我再次添加它时,图像上的任何地方都没有可点击的区域,尽管开发人员的工具显示了链接应该在正确位置的方块。

代码 (我还没有包括javascript,因为它只显示不透明度,并添加/删除下面提到的类):

HTML

<div id="slideshow">
  <ul>
    <li><img src="/images/header01.jpg" alt="some_image" /></li>
    <li><img src="/images/header02.jpg" alt="some_image" /></li>
    <li><img src="/images/header03.jpg" alt="some_image" /></li>
  </ul>
</div>
<ul class="links">
  <li><a href="link1.html">&nbsp;</a></li>
  <li><a href="link2.html">&nbsp;</a></li>
  <li><a href="link3.html">&nbsp;</a></li>
  <li><a href="link4.html">&nbsp;</a></li>
  <li><a href="link5.html">&nbsp;</a></li>
</ul>

CSS

ul.links {
  z-index: 9999;
  position: relative;
}
.links li {
  float: left;
}
.links a {
  display: block;
  width: 192px;
  height: 210px;
}
#slideshow {
  position: absolute;
  left: 0;
  top: 0;
}
#slideshow li {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  opacity: 0.0;
  border: none;
  /* ie bugs */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
#slideshow li.active {
  z-index: 10;
  opacity: 1.0;
}
#slideshow li.last-active {
  z-index: 9;
}

3 回复 | 直到 15 年前

David 15 年前

好吧,这是你的问题!

<div id="slideshow">
<ul>
<li><img src="/images/header01.jpg" alt="Habitats Peru - Cusco, Peru" title="Habitats Peru - Cusco, Peru" /></li>
<li><img src="/images/header02.jpg" alt="Habitats Peru - Cusco, Peru" title="Habitats Peru - Cusco, Peru" /></li>
<li><img src="/images/header03.jpg" alt="Habitats Peru - Cusco, Peru" title="Habitats Peru - Cusco, Peru" /></li>
<li><img src="/images/header04.jpg" alt="Habitats Peru - Cusco, Peru" title="Habitats Peru - Cusco, Peru" /></li>
<li><img src="/images/header05.jpg" alt="Habitats Peru - Cusco, Peru" title="Habitats Peru - Cusco, Peru" /></li>
</ul>
</div>

IES的JavaScript解释器非常挑剔,当您像现在这样操作一个对象时,它通常会猛烈抨击。这将是其中一次。我想问题是你改变了对象,所以它认为你有优先权。

就个人而言,我只是简单地将您的代码更改为架构的以下代码(psedoucode)。

<div>
<ul>
<li><a><img /></a></li>
<li><a><img /></a></li>
</ul>
</div>

从这里开始,您只需为每个图像设置一个类/ID名称,以便在javascript中轻松地更改它们(这将是我理想的解决方案)。

希望这有帮助,

[编辑]

仔细查看您的网站后,我发现以下几个问题: CSS:

Line 336:  margin: 0px 0px 18px;;

它不影响这一点,但需要解决一些问题。

现在,分解一些CSS,IE的问题在于,出于某种原因,它不允许在.active类上使用链接。

如果你想看看我在描述什么,只需将float:left;off image诳bar.links li 你会看到所有的链接都与中心对齐,它们是分开的。所以这就指向了IE中的一个定位问题。

现在想办法解决这个问题。现在,只需在容器图像栏ul.links中添加一个宽度,就可以修复此问题。宽度必须为962,就像最大宽度一样。这将使它们的链接正确对齐,而不是在单独的行上。

现在有一个问题,让他们出现在图像的顶部,在IE。我把所有的链接都变成黑色,以便我能够看到他们,并使他们来到顶部,可以点击。在这个时候,我不确定为什么没有这个他们就不会出现。但我希望这能给你一个好的开始,我会继续努力的。

[编辑]将“zoom:normal;”添加到“image_bar.links a”将完全修复它。 [编辑]刚刚测试了它以确保不需要有条件的CSS,它仍然在所有具有这些修复的浏览器中正确显示。

[编辑]好吧,所以我又试了一次上面的修复,出于某种原因,它们现在还没有通过。所以我去尝试了我的另一个想法。我们开始吧。

#image_bar UL.links [Add] width: 962px;
#image_bar .links A [Add] 
background-color: #E8E6D7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);

我不知道为什么有必要在IE中使用背景色,但由于某种原因,它不同于Z-index,它把链接带到了前面,然后因为它们当前有图片,所以我将背景色更改为页面的颜色,使其混合在一起。然后我用你之前的不透明度来跟踪它,这样你就可以看到其他的图像了。

我希望这对你有用,我试了两次,包括重新启动一个可视化的CSS编辑器,以确保它能正常工作,这不仅仅是像其他时间一样愚弄我。

很抱歉,答案越长,这都是思考过程的一部分。享受!

Pekka 15 年前

你能试着给予吗 #slideshow Z指数低于9999?

pixeltocode 15 年前

JavaScript可能会覆盖您的CSS,并为幻灯片图像提供更高的z索引。

尝试

#slideshow li {z-index: 8 !important;}

使用!重要信息覆盖在其他地方指定的任何其他CSS规则。

希望这有帮助