IE7 中的 CSS 工具提示渲染问题+

发布于 2024-11-18 19:41:50 字数 1056 浏览 1 评论 0 原文

当我将鼠标悬停在链接上时，会出现顶部提示。这些工具提示显示列标题的过滤选项。工具提示包含文本、下拉列表或文本框。在 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/

原文

I have tooptips show up when hovering over a link. These tooltips show filtering options for column headers. A tooltip contains text, a drop down list or a text box. In Firefox and Chrome the CSS works fine, however in IE7+ there are problems.

The tooltip appears over top all other objects on the page (as it's supposed to) except the original anchor link and image that you hover over. These get rendered over top the tooltip and it's contents.
The tooltip, when containing a dropdown list, disappears when the mouse cursor opens the drop down list and moves onto the DDL's listing box. I'm assuming that when the cursor moves over the list, it no longer is hovering over the tooltip, and it closes. IE has problems with telling the tooltip that when hovering over the DDL's list, that its actually hovering over the tooltip itself.

My CSS is very straight forward:

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; 
}

Has anyone run into this issue before and is there a work around?

EDIT: this is the tooltip bug: enter image description here

EDIT #2: Here is an example of my code: http://jsfiddle.net/NAXrc/