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

Question

我有一个简单的（绝对定位的）图像幻灯片，其中包含一些每隔几秒钟旋转一次的图像。

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

这在 Firefox (3.6)、Safari (windows) 和 Chrome (windows) 中运行良好。然而，在 IE8 和 IE7 中，链接似乎消失在图像后面（我什至还没有在 IE6 中尝试过......）。

如何在 IE 中将无序列表置于最前面？（参见下面的代码）

编辑： 链接到工作页面

编辑 2： 我使用开发人员工具找到了什么IE8，当我删除时，链接可以工作并且位于幻灯片的顶部：

.links a { display: block; }

删除 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;
}

Answer 1

好吧，这就是你的问题！

<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>

IE 的 Javascript 解释器非常挑剔，当你像现在这样操作一个对象时，它通常会猛烈攻击。这将是其中之一。我猜问题是您正在更改对象，因此它认为该对象具有优先级。

就我个人而言，我只是简单地更改您的架构代码如下（pseduocode）。

<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; #image_bar .links LI 的关闭
您将看到所有链接都与中心对齐，并且它们位于不同的行上。所以这表明 IE 中存在定位问题。

现在要弄清楚如何解决这个问题。
现在只需向容器 #image_bar UL.links 添加宽度即可解决此问题
宽度需要为 962，就像您的最大宽度一样。
这将使它们的链接正确排列，而不是在单独的行上。

现在存在使它们出现在 IE 中图像顶部的问题。我将所有链接变成黑色，以便我能够看到它们，这使它们到达顶部并且可以点击。目前，我不确定为什么他们不会在没有这个的情况下出现。但我希望这能给你一个好的开始，我会继续搞砸它。

[编辑] 添加“缩放：正常；”到“#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 不同，将链接放在前面，然后由于它们当前有图片，我将背景颜色更改为然后我按照之前的不透明度进行操作，这样您就可以实际看到其他图像。

我希望这对你有用，我尝试了 2 次，包括重新启动可视化 CSS 编辑器，以确保它能正常工作，并且不会像上次那样愚弄我。

抱歉，答案较长，这都是思考过程的一部分。
享受！

Answer 2

您可以尝试为 #slideshow 设置低于 9999 的 z-index 吗？

Answer 3

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

尝试

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

使用 !important 覆盖其他地方指定的任何其他 CSS 规则。

希望这有帮助