IE6的CSS弹出问题答案

【问题标题】：CSS Popup issue with IE6IE6的CSS弹出问题
【发布时间】：2012-03-13 08:14:13
【问题描述】：

我有一个 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>

有什么想法吗？提前致谢

【问题讨论】：

IE6 对于 Web 开发人员/设计师来说始终是个大问题。它的盒子模型与其他浏览器/版本的 IE 完全不同。如果您不介意，我可以问是否有必要使网站兼容 IE6。
IE6 盒子模型与 w3c 模型没有什么不同，除非您处于 quirks 模式。
尝试设置类似 .ToolTip a {position:relative} 的内容，对于 IE6，还可以在 .ToolTip a:hover span 上添加 zoom:1 以确保您没有 hasLayout 问题。希望对你有帮助
绝对定位的东西在IE中一般都有布局。我建议 OP 将他/她想要的所有样式放在工具提示中的 span 声明而不是 :hover 声明中，并且只更改 :hover 上的可见性......也就是说，只添加 display: 块。此外，溢出：隐藏在 IE6 中是错误的，我不明白你为什么需要它。
@user1106741：现在可以用了吗？

标签： html css internet-explorer popup

【解决方案1】：

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

您的样式表中有许多参数，您是故意使用所有参数还是只是尝试添加越来越多的参数以使其可能工作？

例如看看：

.ToolTip 一个 span {display: none;文字装饰：无；颜色：#FFFFFF； }

这里不需要声明颜色和文字装饰，就好像你已经设置了 display:none 一样，该元素无论如何都不应该显示。顺便说一句，您在 :hover 状态下声明了相同的颜色，所以无论如何它也是双倍的。

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

.ToolTip a:hover span { overflow:hidden;文字装饰：无；显示：块；位置：绝对；宽度：250px；背景颜色：#046C08；边框：无；高度：90px；左：25px；顶部：-10px；颜色：#FFFFFF；填充：5px；行高：18px； z-index：1； }

就像说的那样，不需要溢出：隐藏。如果它比 250px 宽度和/或 90px 高度长，这只会隐藏您的 span 元素中的文本。但这与你的问题无关。

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

所以...

Display:block 有时会被奇怪地解释。位置：绝对 - 我们开始：您是否将跨度元素定位在图像上方？或者在页面之外（可能不完全，它可能太大了）。如果你把它放在图像后面，你可以尝试改变顶部、左侧和 z-index。如果更改 z-index，则应尝试为图像分配 z-index 或删除两个 z-index 值。如果分配 z-index，请尝试设置两个值之间的巨大差异，或者一正一负。

总而言之，尽量从每个元素所需的最小参数开始。然后添加您真正需要的内容。尝试将所有参数分别设置到 span 元素，并且只更改显示。

【讨论】：