Question

我有一个问题，使用一个小div，应该“悬停”在使用JQuery循环插件切换的图片上。这些图片的宽度为950px，在图片的右侧，一个小盒子应该是最新消息。

问题是在IE中的兼容模式下，框似乎松开了它的z-index并最终落后于图片。它适用于IE8，Opera，Chrome和Firefox。

我试图删除2张图片，所以只有1张图片显示，然后由于某种原因，它也适用于compabilitymode。我试图删除img-tags之间的空格，但没有运气，保证金：0;填充：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＆gt; 1000，你希望在屏幕上最前卫。

我遇到类似问题的时候真的很难过。（CSS Drop Down在横幅下方）我使用CSS最终修复它，将父导航div改为整个导航到position:absolute和真正高z-index但我测试了{{3}它工作得非常好。

循环IE7层

1 个答案: