循环IE7层

Question

我在使用一个小 div 时遇到问题，该 div 应该“悬停”在使用 JQuery 循环插件切换的图片上。图片宽 950 像素，图片顶部右侧有一个小框，其中包含最新新闻。

问题是在 IE 的兼容模式下，该框似乎失去了 z 索引并最终位于图片后面。它适用于 IE8、Opera、Chrome 和 Firefox。

我尝试删除 2 张图片，因此只显示 1 张图片，然后由于某种原因它也可以在兼容模式下工作。我尝试删除 img 标签之间的空格，但没有成功，margin: 0; padding: 0 全部都是，但运气不好

有人知道可能出了什么问题吗？

CSS 代码

#Content {
    width: 950px;   
}
#NewsWrapper {
    position: relative;
    padding: 0;
    margin: 0;
    top: 0;
}
#NewsListning {
    float: right;
    height: 200px;
    margin: 0;
    padding: 10px;
    background: yellow;
    top: 0;
    right: 0;
    position: absolute;
    z-index: 12;
    width: 300px;
}
#SlideImages {
    width: 100%;
    margin: 0; 
    padding: 0; 
    float: left; 
    z-index: 11;
}
.SlideImage {
    display: inline;
    float: left;
    padding: 0;
    margin: 0;
    z-index: 11;
}

JavaScript 代码

$(function () {
  $('#SlideImages').cycle({
    fx: 'fade',
    speed: 5000
  });
});

HTML 代码

<div id="Content">
<div id="SlideImages">
    <img src="/Images/Slide1.jpg" class="SlideImage" />
    <img src="/Images/Slide2.jpg" class="SlideImage" />
    <img src="/Images/Slide3.jpg" class="SlideImage" />
</div>

<div id="NewsWrapper">
  <div id="NewsListning">
    <div>
      <strong>Test 2</strong> 
      Lorem ipsum
    </div>
  </div>
</div>

• 已解决 - 附加说明*

在除 IE7 之外的所有浏览器中，您需要指定，例如 top: 0; left:0 如果你要使用position:absolute。否则它通常会在现场结束。另一件事对于 IE7 来说是没有意义的。

Answer 1

将 #NewsWrapper 设置为比 #NewsListing 更高的索引，

这应该可以工作

另外，我还没有查看 Cycle 的代码，但我假设它使用高于 12 的 z-index。您可能想要使用 z-索引 > 1000 表示您希望成为屏幕上最前沿的内容。

我刚刚遇到类似的问题非常困难。 （CSS Drop Down 位于横幅下方）我最终使用 CSS 修复了它，将整个导航的父 div 更改为 position:absolute 和一个非常高的 z-index 但我测试了这个< /a> 效果非常好。