在IE8，IE7和可能的IE6的图像幻灯片前面获得无序列表 [英] Getting unordered list in front of image slide-show in IE8, IE7 and probably IE6
问题描述
我有一个简单的（绝对定位的）图像幻灯片，其中包含几秒钟旋转的几个图像。
I have a simple (absolutely positioned) image slide-show that consists of a few images that rotate every few seconds.
要改变图像的不同区域
这在Firefox（3.6）中可以正常工作， Safari（Windows）和Chrome（Windows）。但是，链接似乎消失在IE8和IE7中的图像后面（我甚至没有尝试在IE6中...）。
This works just fine in Firefox (3.6), Safari (windows) and Chrome (windows). However, the links seem to disappear behind the images in IE8 and IE7 (I haven´t even tried it in IE6 yet...).
如何（见下面的代码）
编辑：链接到工作页面
编辑2：我使用IE8的开发人员工具找到的是，链接工作，并在幻灯片放映时，我删除：
Edit 2: What I did find using the developers tools of IE8, is that the links work and are on top of the slide-show when I remove:
.links a { display: block; }
删除 display：block 的结果是我有5个小可点击区域覆盖左上角的图像。一旦我再次添加它，图片上的任何地方都没有可点击区域，虽然开发者工具显示的链接应在正确的位置的方块。
The result of removing display:block is that I have 5 tiny click-able areas overlaying the image in the upper left corner. As soon as I add it again there is no click-able area anywhere on the image although the developers tools show the squares where the links should be at the correct locations.
代码（我没有包括javascript，因为它只是动画不透明，添加/删除下面提到的类）：
The code (I haven´t included the javascript as it only animates opacity and adds / removes the below mentioned classes):
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"> </a></li>
<li><a href="link2.html"> </a></li>
<li><a href="link3.html"> </a></li>
<li><a href="link4.html"> </a></li>
<li><a href="link5.html"> </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;
}
推荐答案
/ p>
Well there's your problem!
<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解释器非常巧妙，当你像现在一样操纵一个对象时，它通常是睫毛出来。这将是这些时间之一。我猜想问题是，你正在更改对象，所以它认为有优先。
IEs Javascript interpreter is very finicky and when you are manipulating an object as you are now, it generally lashes out. This would be one of those time. I would guess that the problem is that you are changing the object so it considers that to have precedence.
我个人只是简单地更改您的代码如下（pseduocode）
Personally I would just simply change your code as follows (pseduocode) for the architecture.
<div>
<ul>
<li><a><img /></a></li>
<li><a><img /></a></li>
</ul>
</div>
所有你需要做的就是为每个图像设置一个类/所以他们可以很容易地换成Javascript（这将是我的理想解决方案）
All you have to do from here is simply either set a class/id name for each of the images so they can be easily changed out in Javascript (this would be my ideal solution)
希望这有助于，
仔细看看你的网站后，发现了几个问题：
CSS：
After taking a closer look at your site heres a few problems I found: CSS:
Line 336: margin: 0px 0px 18px;;
它不会影响这个，但是要修复的东西。
It doesn't effect this, but something to fix.
现在，分解一些CSS的问题与IE是由于某些原因不允许链接被用于.active类由于某种原因。
Now, breaking down some of your CSS the problem with IE is that it is for some reason not allowing a link to be used on the .active class for some reason.
如果你想看看我在描述什么，只需要float：left;关闭#image_bar .links LI
你会看到所有的链接都对齐中心，它们在单独的行。因此，这指向IE内的定位问题。
If you want to see what I am describing, simply take float: left; off of #image_bar .links LI And you will see that all of the links are aligning to the center and they are going on separate lines. So this points to a positioning problem within IE.
现在找出如何解决这个问题。
现在通过简单地添加一个宽度到容器#image_bar UL.links
宽度需要是962，就像你的最大宽度。
这将使它们的链接正确，而不是在单独的行。
Now to figure out how to fix this. This is fixed now by simply adding a width to the container #image_bar UL.links The width needs to be 962 just like your max width. This will then make them links line up properly instead of on separate lines.
现在有一个问题，使它们出现在图像的顶部在IE 。我把所有的链接变成了黑色，这样我就可以看到它们，使他们来到顶部，并且可以点击。在这个时候，我不知道为什么他们不会没有显示。
Now there is the problem of making them appear on top of the image in IE. I turned all of the links black so that I was able to see them and that made them come to the top and be click able. At this time, I'm not certain why they wouldn't be showing without that. But I hope that gives you a good start and I'll keep messing with it.
[edit]添加zoom：normal;。到#image_bar .links A，这将完全解决它。
只是测试它，以确保不需要条件css，它仍然在所有浏览器中正确显示这些修复。
[edit] Add "zoom: normal;" to "#image_bar .links A" and that will completely fix it. [edit] Just tested it to make sure that conditional css isn't needed, it still displays properly in all browsers with those fixes.
[edit]好吧，所以我再次尝试我的上述修复，由于某种原因，他们没有通过现在。所以我去试试另一个想法。这里我们去。
[edit]Okay, so I tried my above fixes one more time and for some reason they didn't go through now. So I went and tried another idea I had. Here we go.
#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 am not sure why it is necessary to have the background-color in IE but for some reason it, unlike z-index, is bringing the links to the front, then since they currently have pictures on them I change the background-color to that of your page so it blends in. I then follow that with your opacity from before that way you can actually see the other images.
我希望这对你有用，我试了2次，包括重新启动一个可视化的CSS编辑器，以确保它的工作原理，
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!
这篇关于在IE8，IE7和可能的IE6的图像幻灯片前面获得无序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
