IE7+ 中的 CSS Tooltips 渲染问题

Posted 2023-05-08

【中文标题】IE7+ 中的 CSS Tooltips 渲染问题

【英文标题】：CSS Tooltips rendering problem in IE7+

【发布时间】：2011-09-28 22:29:49

【问题描述】：

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

工具提示显示在页面上所有其他对象的上方（正如它应该显示的那样），除了您悬停在上面的原始锚链接和图像。这些会在工具提示及其内容之上呈现。

当鼠标光标打开下拉列表并移动到 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/

【问题讨论】：

我尝试摆弄 z-index，但它似乎没有做任何事情。我什至试图删除除工具提示代码之外的所有 CSS。它仍然看起来破碎。至于下拉列表的问题，我很茫然。

工具提示问题在 IE8+ 中不是问题。即使在最新的 IE9 中，下拉列表问题也很明显。我可能不得不寻找其他显示列表的途径。

【参考方案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/

但是在IE7+中存在问题。

IE8/9 中不应该存在这些问题。您的页面没有使用 IE8/9 标准模式吗？

如果您的页面使用的是兼容模式（模拟 IE7）或 Quirks 模式，那就可以解释为什么高于 7 的版本也会出现问题。

【讨论】：

我们公司的标准仍然是IE7，所以我假设使用本网站（内部）的人仍然使用IE7。只要还是底线，我就只能支持了。

那么您必须尝试应用我链接到的解决方法。如果您可以在jsFiddle 或JS Bin 上重现问题，我会尽力为您解决。

我按照你的要求做了。您可以在 IE7 标准模式下运行它并看到它执行正常，但下拉列表会在尝试选择和项目时关闭工具提示。在 IE8 模式下，您会看到链接/图像呈现在工具提示上方。它也仍然显示下拉问题。链接：jsfiddle.net/NAXrc

今天晚些时候我会看看。我不得不说，这看起来非常令人生畏。没有承诺！

Z-index 是问题所在。我正在修改 CSS 的错误部分。当你继承遗留代码时会发生这种情况:(。