我在使用应该“悬停”在使用 JQuery 循环插件切换的图片上的小 div 时遇到问题。图片的宽度为 950 像素,图片右侧的一个小盒子应该是最新消息。
问题是在 IE 的兼容模式下,盒子似乎松动了它的 z-index 并最终出现在图片后面。它适用于 IE8、Opera、Chrome 和 Firefox。
我试图删除 2 张图片,所以只有 1 张图片显示,然后由于某种原因它也可以在兼容模式下工作。我试图删除 img-tags 之间的空格,但没有运气,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 没有意义的事情。