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>

IEs 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类上使用链接。

如果你想看看我所描述的，只需要浮动：左;离#image_bar。链接LI 你会发现所有链接都与中心对齐，并且它们分开排列。所以这指向IE中的定位问题。

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

现在存在使它们出现在IE中的图像顶部的问题。我将所有链接都变黑了，这样我才能看到它们，这使它们成为顶级并且可以点击。在这个时候，我不确定为什么他们不会没有这个。但我希望这会给你一个良好的开端，我会继续搞砸它。

[edit]添加“zoom：normal;”到“#image_bar .links A”，这将完全解决它。 [edit]刚测试它以确保不需要条件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编辑器，以确保它有效，并且它不仅仅是像其他时间那样欺骗我。

对不起答案更长，这是思考过程的一部分。享受！

Answer 2

你能尝试给#slideshow一个低于9999的z指数吗？

Answer 3

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

尝试

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

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

希望这会有所帮助

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

3 个答案: