IE 8 Z-index 堆叠问题
http://carettaworkspace.spirecms.com
在 IE 8 中，按钮右侧的文本和缩略图幻灯片堆叠在空白区域上方，可以单击来控制幻灯片。在其他浏览器中，可以单击按钮内的整个区域来更改幻灯片。
我了解 IE 7 和 IE 7 8 在 Z 索引堆叠方面很特殊，我尝试了许多常见的修复方法（为父 div 设置 z 索引，以不同的方式定位父 div），但我无法解决问题。有谁知道可以解决这个问题的解决方案？
所以你知道，幻灯片的文本和图像位于 Slidethumbs div 下。空链接可以在幻灯片区域-> 下找到。任何内容控件 div。
非常感谢任何帮助。谢谢！
http://carettaworkspace.spirecms.com
In IE 8, the text and thumbnail image within the buttons to the right of the slideshow are stacking above the empty areas which can be clicked to control the slideshow. In other browsers, the entire area is clickable within the button to change slides.
I know IE 7 & 8 are special when it comes to Z-index stacking, and I've tried many of the common fixes (setting a z-index to the parent divs, positioning parent divs different ways), but I am unable to fix the problem. Does anyone know of a solution that could fix this issue?
So you know, the text and image of the slideshow are under the slidethumbs div. The empty links can be found under the slidearea -> anythingControls div.
Any help is much appreciated. Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
解决方案分为两部分：首先，我需要对 HTML 进行一些重新排序，以使两个问题层位于同一父 div 下。这允许我为父 div 和子 div 设置 z-index，以使 IE 运行良好。其次，我发现 IE 不允许空 div 在文本或图像之上运行！诡异的。因此，我最终为 div 提供了 1px x 1px 的非重复背景图像，因此从技术上讲它并不是完全空的。这完全解决了这个问题，IE8允许div位于图像和文本区域之上。
The solution was two part: First, I needed to reorder the HTML a bit to get the two problem layers under the same parent div. This allowed me to set a z-index for the parent div as well as the child divs to make IE play nice. Secondly, I found that IE would not allow an empty div to function above text or images! Weird. So, I ended up giving the div a 1px x 1px non-repeating background image so it technically wasn't completely empty. This completely fixed the issue, and IE8 allowed the div to be above the image and text areas.
我认为如果不重新排序一些 HTML / CSS 就不行。还没在 IE 中（在 Mac 上）看过它，但解释如下：
在 IE 中，堆叠上下文是由 anything 和
position设置。因此，您的.anythingSlider正在定义堆叠上下文，并且您的导航 ul 无法超出缩略图。基本上，z-index 只会上升到具有堆叠上下文的最近元素。在大多数浏览器中，上下文是由具有（定位+ z-index）或（不透明度<1）的任何内容定义的。
仅供参考，我通常做的是在设置了定位的所有上设置
z-index: 1。处理起来有点烦人，但所有浏览器的行为都是一样的。I don't think you can without re-ordering a bit of your HTML / CSS. Haven't looked at it in IE (on a mac), but here's the explanation:
In IE, stacking context is defined by anything with
positionset. So your.anythingSlideris defining a stacking context and your nav ul can't get above the thumbnails.Basically, z-index only goes up to the nearest element with a stacking context. In most browsers context is defined by anything with (positioning + z-index) or (opacity < 1).
FYI, what I normally do is set
z-index: 1on everything that has positioning set. It's a bit more annoying to deal with, but all the browsers behave the same that way.