Question

这个CSS适用于IE8及更新版本（以及Chrome版本），但不适用于IE7。具体来说，当我将鼠标悬停在div上时，工具提示就不会出现。我需要为IE7（和IE6）更改什么？

.headertooltip, .headertooltip:visited
{
    color: #0077AA;
    float: left;
    height: 40px;
    text-decoration: none;
    width: 20px;
}

.headertooltip div
{
    background-color: black;
    color: #fff;
    left: 50px;
    padding: 5px 10px 5px 40px;
    position: absolute;
    text-decoration: none;
    top: 82px;
    visibility: hidden;
    width: 900px;
    z-index: 10;
}

.headertooltip:hover div
{
    position: absolute;
    visibility: visible;
}

更新

我已更新代码以使用鼠标事件来显示div /工具提示，但仍然无法在IE7中运行。这让我觉得问题在于我的标记/ CSS。

我试图在jsFiddle中创建一个示例。它不起作用，但你明白了。将鼠标悬停在左侧的小黑框上（我刚刚添加，以便您可以看到目标）应该显示工具提示。

http://jsfiddle.net/szyN4/

Answer 1

IE6对:hover伪类的支持很少，而且IE7不完整。

尝试将.headertooltip:hover div更改为.headertooltip div:hover以取悦IE浏览器冒泡机制的奇怪之处。它可能会解决您的问题（当然，您只需将其包含在IE7的条件样式表中）。

您也可以通过实施mouseenter和mouseleave来回避这一点。有关快速参考，请参阅a posted answer of mine on IE's innovation regarding mouse events。

CSS无法在IE7中运行

1 个答案:

参考