3

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

为了让变化图像的不同区域可点击，我还有一个包含不同链接的无序列表，相对定位以便使用 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;
}
4

3 回答 3

2

嗯，有你的问题！

<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; off of #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 不同，将链接放在前面，然后因为它们目前有图片，所以我将背景颜色更改为你的页面的那个，所以它融合在一起。然后我按照你之前的不透明度，这样你就可以真正看到其他图像。

I hope this works for you, I tried it 2 times including restarting a visual CSS editor to make sure that it works and that it wasn't just fooling me like the other time.

Sorry for the answer being longer, it was all part of the thinking process. Enjoy!

于 2010-01-30T20:42:11.267 回答
1

您可以尝试给出#slideshow低于 9999 的 z-index 吗？

于 2010-01-28T16:06:55.387 回答
1

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

尝试

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

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

希望这可以帮助

于 2010-01-29T14:03:11.737 回答