IE 8 Z-index堆叠问题

Question

http://carettaworkspace.spirecms.com

在IE 8中，幻灯片放映右侧按钮内的文本和缩略图图像堆叠在空白区域上方，可以单击这些空白区域来控制幻灯片放映。在其他浏览器中，整个区域可在按钮内单击以更改幻灯片。

我知道IE 7＆amp; 8在Z-index堆叠方面是特别的，我尝试了很多常见的修复（设置一个z-index到父div，定位父div不同的方式），但我无法解决问题。有谁知道可以解决这个问题的解决方案？

所以你知道，幻灯片的文字和图像都在幻灯片div下面。可以在幻灯片区域下找到空链接 - ＆gt; anythingControls div。

非常感谢任何帮助。谢谢！

Answer 1

解决方案分为两部分：首先，我需要重新排序HTML以获得同一父div下的两个问题层。这允许我为父div和子div设置z-index以使IE玩得很好。其次，我发现IE不允许空div在文本或图像上方运行！奇怪的。所以，我最终给div一个1px x 1px非重复背景图像，所以它在技术上并不是完全空的。这完全解决了这个问题，IE8允许div位于图像和文本区域之上。

Answer 2

我不认为你可以不重新订购一些HTML / CSS。没有在IE中查看它（在Mac上），但这里是解释：

在IE中，堆叠上下文由设置为position的 任何 定义。因此，您的.anythingSlider正在定义堆叠上下文，而您的导航ul无法超越缩略图。

基本上，z-index仅上升到具有堆叠上下文的最近元素。在大多数浏览器中，上下文由（定位+ z-index）或（不透明度＆lt; 1）的任何内容定义。

仅供参考，我通常所做的是在具有定位设置的所有上设置z-index: 1。处理起来有点烦人，但所有浏览器的行为方式都相同。