简体繁体 English

如何修复 IE7 中的 HTML z-index 图层排序？

[英]How to fix HTML z-index layer ordering in IE7?

原文 2010-01-22 22:36:04 2 2 jquery/ html/ css

I have a popup that is displayed above the link when I hover over a link.当我将鼠标悬停在链接上时，我有一个弹出窗口显示在链接上方。 There is an image just above the link so the problem is that in ie7 the popup is appearing under the image.链接正上方有一个图像，所以问题是在 ie7 中，弹出窗口出现在图像下方。 It works well in IE8 and Firefox.它在 IE8 和 Firefox 中运行良好。

The problem that I want to fix is found on this page: http://www.kandscars.com/servicecontracts.php .我想解决的问题在这个页面上找到： http : //www.kandscars.com/servicecontracts.php 。 If you hover over "Class One" then hover over "Cars In This Class".如果您将鼠标悬停在“Class One”上，则将鼠标悬停在“Cars In This Class”上。

2 个解决方案

I did some debugging and it turns it's the opacity filter for IE on the <div class="cover boxcaption"> that's causing the cut off, not the image.我做了一些调试，结果发现<div class="cover boxcaption">上的 IE 不透明<div class="cover boxcaption">导致了截断，而不是图像。

I couldn't get it working with the filter applied so the only thing I can suggest that will fix it is to use a semi-transparent background png instead of using css to apply the transparency.我无法在应用过滤器的情况下使用它，所以我唯一可以建议修复它的是使用半透明背景 png 而不是使用 css 来应用透明度。

You need to set the z-order to 1 in the css class of the popup.您需要在弹出窗口的 css 类中将 z-order 设置为 1。 I found the same problem a couple of months ago!几个月前我发现了同样的问题！