IE6/7 - a - tr td 中的 CSS 弹出窗口

Question

我正在为 CSS 弹出窗口而苦苦挣扎，希望有人能提供帮助。

我们有各种 tds 在他们的单元格中有这个弹出窗口，在 firefox、chrome 等（通常）中它工作正常。但是在 IE8 以下的旧浏览器中会出现问题。

当鼠标移出单元格时，似乎 :hover 会丢失，即使它移到弹出区域（位于单元格正下方）上也是如此。您可能会说是的，这是它应该做的，但是在 firefox 中悬停的父元素的子元素将 :hover 类保留在父元素上。

弹出的 div 是绝对定位的，左边距为 -999px； （没关系）

在 :hover 父 div 元素时，margin-left 设置为 -125px（弹出 div 宽度的一半，因此居中 - 也可以）

如前所述，这一切都很好，并且在现代浏览器中完美运行。

HTML 片段

<tr>
    <td>
        <div class="tooltip">
            <span class="events">CONTENT</span>
        </div>
    </td>
    <td>
        <div class="tooltip">
            <span class="events">CONTENT</span>
        </div>
    </td>
    <td>
        <div class="tooltip">
            <span class="events">CONTENT</span>
        </div>
    </td>
    <td>
        <div class="tooltip">
            <span class="events">CONTENT</span>
        </div>
    </td>
    <td>
        <div class="tooltip">
            <span class="events">CONTENT</span>
        </div>
    </td>
</tr>

CSS 至此

#page-content .block_calendar_month { overflow: visible; }

.tooltip { border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; }

.tooltip span { margin-left: -999em; position: absolute; }
td.day:hover { background-color: #fbf16b; }

.tooltip:hover span { font-size: 12px; position: absolute; left: 0em; z-index: 5000; top: 1em; margin-left: -125px; width: 250px; }

.tooltip:hover span div { }
.events {padding: 0.8em 1em; }

希望有人能给我一些建议，因为我已经浪费了几个小时试图解决这个问题。

Answer 1

我已经有一段时间没有接触过 IE6，但是通过使用 IE7，我可以告诉你它在表格和 z-index 方面做了一些时髦的事情。我发现使用工具提示时最好的解决方案是不使用表格。为什么不去掉表格代码并拥有：

<div class="tooltip">
    <span class="events">CONTENT</span>
</div>

另外，我不确定您使用的是什么插件（实际上，您似乎没有使用任何插件），但是如果您使用 JQuery Tools 工具提示插件，则可以将弹出窗口的偏移距离设置为 JSON 参数。阅读更多http://jquerytools.org/demos/tooltip/dynamic.html。

如果您要保留当前的实现，我建议您在 display:block 和 display:none 之间切换工具提示。