IE7+ 中的 CSS Tooltips 渲染问题

Question

我将鼠标悬停在链接上时会出现提示。这些工具提示显示列标题的过滤选项。工具提示包含文本、下拉列表或文本框。在 Firefox 和 Chrome 中，CSS 工作正常，但在 IE7+ 中存在问题。

1. 工具提示显示在页面上所有其他对象的顶部(正如它应该的那样)，但您悬停在其上的原始 anchor 链接和图像除外。这些在工具提示及其内容之上呈现。

2. 工具提示在包含下拉列表时会在鼠标光标打开下拉列表并移到 DDL 的列表框时消失。我假设当光标移到列表上时，它不再悬停在工具提示上，它会关闭。 IE 在告诉工具提示时出现问题，当悬停在 DDL 的列表上时，它实际上悬停在工具提示本身上。

我的 CSS 非常简单:

ul li a:hover { background: #88f; border-style: none; }
.tooltip{
   z-index:25;
   border: none;
   color: inherit;
}

.tooltip:hover { z-index:25; position:relative;}

.tooltip span.tooltip_actual { display: none; }

.tooltip:hover span.tooltip_actual {
   display:block;
   position:absolute;
   top:-1em; left: -42em; width: 40em;
   border:1px solid #000;
   background-color: #fff; color:#000;
   text-align: left; padding: 1em; 
}

以前有没有人遇到过这个问题，有解决办法吗？

编辑:这是工具提示错误:

编辑 #2:这是我的代码示例:http://jsfiddle.net/NAXrc/

Answer 1

IE7 有已知的 z-index 错误。

如果你能提供一个测试用例，我可能会给你一个更好的答案。

否则，我所能做的就是将您指向这些资源:

• http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
• IE 6 & IE 7 Z-Index Problem
• IE7 Z-Index Layering Issues
• http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

however in IE7+ there are problems.

IE8/9不应该存在这些问题。您的页面是否未使用 IE8/9 标准模式？

如果您的页面使用兼容模式(模拟 IE7)或 Quirks 模式，这可以解释为什么比 7 更高的版本也会出现问题。