Question

我有一个HTML页面，我必须在鼠标悬停图像上显示弹出窗口（如工具提示）。以下代码在IE8和Firefox中工作正常，我有IE6问题，悬停弹出窗口没有显示。

    STYLE:
    /* css style */
    .ToolTip { position: relative; cursor: default; text-decoration: none; border: none;}

    .ToolTip a span {display: none; text-decoration: none; color: #FFFFFF; }

    .ToolTip a:hover span { overflow:hidden; text-decoration: none; display: block;
     position: absolute; width: 250px; background-color: #046C08; border: none; height: 90px;
     left: 25px; top: -10px; color: #FFFFFF; padding: 5px; line-height: 18px; z-index: 1; }

    HTML:

/* html page content */

    <p class="ToolTip">
        <a href="#">
            <img src="...." alt="" style="border: 0px;" />
     <span>
                 CSS Popup..
     </span>
        </a>
    </p>

请问有什么想法吗？提前谢谢

Answer 1

正如Happy Singh所说，大多数网站不再支持IE6兼容性。但是，您如何尝试修复它：

你的样式表中有很多参数，你是故意使用它们还是只是尝试添加越来越多的参数以使它可能有效？

E.g。看看：

.ToolTip a span {display：none; text-decoration：none;颜色：#FFFFFF; }

您不需要在此处声明颜色和文本修饰，就像您已经设置了display：none一样，无论如何都不应该显示该元素。顺便说一句，你在：悬停状态声明了相同的颜色，所以它也是双倍的。

由于你发布的代码只是整个代码的一部分，我也可以猜测，但是如果我们看一下就会有一些提示：

.ToolTip a：hover span {overflow：hidden; text-decoration：none;显示：块; 位置：绝对;宽度：250px; background-color：＃046C08; border：none;身高：90px; 左：25px;上：-10px;颜色：#FFFFFF;填充：5px;行高：18px; z-index：1; }

如上所述，不需要溢出：隐藏。如果长度超过250px宽度和/或90px高度，这将简单地隐藏span元素中的文本。但是你的问题无关紧要。

然而，你可能不那么聪明，因为当你没有徘徊时你没有向span元素声明任何位置，但是在状态徘徊，你突然添加位置等。我的意思是，如果你只是更改了可见性或显示，span元素不会改变位置。

因此...

显示：有时可以奇怪地解释块。位置：绝对 - 我们走了：你是否将span-element定位在图像上方？或者在页面之外（可能不完全，它可能太大了）。如果将它放在图像后面，可以尝试更改top，left和z-index。如果更改z-index，则应尝试为图像指定z-index或同时删除两个z-index值。如果您指定z-index，请尝试在两个值之间设置巨大差异，或者一个正值和一个负值。

总而言之，请始终尝试从每个元素所需的最小参数开始。然后添加你真正需要的东西。尝试将所有参数分别设置为span元素，并仅更改显示。

IE6的CSS弹出问题

1 个答案: