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

Posted 2023-03-06

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

【英文标题】：Getting unordered list in front of image slide-show in IE8, IE7 and probably IE6

【发布时间】：2011-01-10 11:34:23

【问题描述】：

我有一个简单的（绝对定位的）图像幻灯片，它由几张每隔几秒旋转一次的图像组成。

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

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

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

编辑： Link to working page

编辑 2： 我使用 IE8 的开发人员工具确实发现，当我删除链接时，链接可以正常工作并且位于幻灯片的顶部：

.links a  display: block; 

删除 display:block 的结果是我有 5 个微小的可点击区域覆盖在左上角的图像上。一旦我再次添加它，图像上的任何地方都没有可点击区域，尽管开发人员工具会显示链接应该位于正确位置的方块。

代码（我没有包含 javascript，因为它只对不透明度进行动画处理并添加/删除下面提到的类）：

html

<div id="slideshow">
  <ul>
    <li><img src="/images/header01.jpg"  /></li>
    <li><img src="/images/header02.jpg"  /></li>
    <li><img src="/images/header03.jpg"  /></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;

【问题讨论】：

再编辑一次。希望该解决方案有效。

【参考方案1】：

你可以尝试给#slideshow 一个低于 9999 的 z-index 吗？

【讨论】：

我尝试将其降低到 99 和 11，但没有。你认为 IE 不能数到 9999 :-)

顺便说一下，我已经添加了指向相关页面的链接。

【参考方案2】：

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

试试

#slideshow li z-index: 8 !important;

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

希望对你有帮助

【讨论】：

谢谢，但 javascript 只是动画不透明度和添加/删除问题中提到的类。

【参考方案3】：

那是你的问题！

<div id="slideshow">
<ul>
<li><img src="/images/header01.jpg"  title="Habitats Peru - Cusco, Peru" /></li>
<li><img src="/images/header02.jpg"  title="Habitats Peru - Cusco, Peru" /></li>
<li><img src="/images/header03.jpg"  title="Habitats Peru - Cusco, Peru" /></li>
<li><img src="/images/header04.jpg"  title="Habitats Peru - Cusco, Peru" /></li>
<li><img src="/images/header05.jpg"  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 类上使用链接。

如果你想看看我在描述什么，只需使用 float: left;关闭#image_bar .links LI 您会看到所有链接都与中心对齐，并且它们在不同的行上。所以这指向了 IE 中的定位问题。

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

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

[编辑] 添加“缩放：正常；”到“#image_bar .links A”，这将完全解决它。 [编辑] 刚刚对其进行了测试以确保不需要条件 css，它仍然可以在所有具有这些修复的浏览器中正常显示。

[edit]好的，所以我再次尝试了上述修复，但由于某种原因，它们现在没有通过。所以我去尝试了另一个我的想法。我们开始吧。

#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 不同，将链接放在前面，然后因为他们目前有图片，所以我更改了背景-color 到您页面的颜色，以便它融入其中。然后我按照您之前的不透明度进行操作，这样您就可以实际看到其他图像。

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

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

【讨论】：

感谢您的评论，但是如果您查看代码，您会发现每张图片中有 5 个可点击区域：并不是不同的图片应该点击不同的 url，而是就是每张图片有 5 个区域到 5 个不同的 url（图片数量和区域数量都是 5 是巧合......）。

我已经尝试了你所做的一切，但我没有看到相同的结果。我将编辑我的问题以显示我确实找到了什么。

太棒了！！！我看到宽度仅适用于 IE6，没有它在 7 和 8 中也可以工作。这是一个疯狂的 IE 错误（直到版本 8！）我以前没有遇到过。非常感谢！！！

没问题。一旦第一件事不起作用，我就决心让它正常工作。这样，如果我有类似的问题或社区中的某个人，那么值得花时间。