IE6 CSS 悬停菜单问题答案

【问题标题】：IE6 CSS Hover issues with menuIE6 CSS 悬停菜单问题
【发布时间】：2013-04-11 20:28:16
【问题描述】：

我有一个 CSS 悬停菜单，它适用于所有浏览器，除了...惊喜 -- IE6！

#menu_right ul li:hover ul { visibility: visible; }

这个ul 显然最初是隐藏的。当我将鼠标悬停在其父 li 上时，它应该会显示出来……但它没有。

为了找出问题所在，我尝试让ul 最初可见，并让悬停动作采取其他方式。例如：

#menu_right ul li ul { visibility: visible; }

#menu_right ul li:hover ul { background: red; }

这没有帮助。在其他浏览器（包括 IE7+）上，当我将鼠标悬停在其父级 list element 上时，ul 将变为红色。但不是在 IE6 中。我错过了什么？

【问题讨论】：

这个链接对我解决 IE6 li:hover 问题真的很有效。 kavoir.com/2009/01/css-selectorhover-hack-for-ie6.html 。这是一个简单的修复:-)

标签： html css internet-explorer-6 hover compatibility

【解决方案1】：

IE6 不知道 CSS :hover 伪属性，当它出现在链接元素之外的任何东西上时。为此，您将不得不使用 JavaScript。试试条件语句，如果你使用jQuery，你可以用 3 行（+/- 格式）编写 IE6 的悬停效果：

<!--[if lt IE 7]>
<script type="text/javascript">
$('#menu_right ul li').hover (function () {
  $(this).addClass ("hover");
}, function () {
  $(this).removeClass ("hover");
});
</script>
<style type="text/css">
#menu_right ul li.hover {...}
...
</style>
<![endif]-->

马克，我在 CSS 语句中使用了点而不是冒号。

干杯，

【讨论】：

感谢您的快速回复。但实际上有任何实现：在 IE6 上悬停，使用纯 CSS。我试图避免使用所有那些 javascript 和特定于浏览器的黑客。 cssplay.co.uk/menus/final_drop.html 如果遇到 IE6，这家伙的代码会将所有内容都放在一个表中。我不太确定为什么会这样，但我已经在 IE6 上测试了他的演示并且确实如此。我试图模仿这一点，但无济于事。
你也可以用<a>代替<li>；不再需要 Javascript，尽管您必须跳过很多其他循环来尝试获取 <a> 标签以呈现与 <li> 相似的内容（损坏的 display: inline-block 支持... gaah HATE IE）。跨度>
此外，IIRC IE4 在动态更改类时没有重新计算 CSS 属性...
还有人支持 IE4 吗？
@ephemient: IE8 支持inline-block，但我花了很长时间才弄清楚你必须将它置于 IE8 模式（即 X-UA 兼容）。为什么微软的家伙仍然开发自己的浏览器？他们为什么不直接说：“好吧，反正我们是免费赠送的，所以就在 WebKit 之上构建一个新的吧！”？或者更简单：微软：购买 Opera！

【解决方案2】：

你应该使用这样的东西

<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
</ul>

并设置<a> 的样式，而不是<li>。您只需确保将 a 的大小设置为与其封闭的 li 的大小完全相同。

div.menu ul.menu {
    margin:0;
    padding:0;
}

div.menu ul li {
    margin:0;
    padding:0;
}

div.menu ul.menu a {
    display:block;
    height:22px;
    margin:0;
    overflow:hidden;
    padding:0;
    width:252px;
}

您看到它适用于除 IE6 之外的所有浏览器的原因是它仅在 <a> 元素上支持 :hover。

【讨论】：

如果不是IE，我建议去掉无用的href="#"（没有<a>是合法的），但我似乎记得一些IE版本只适用于:hover a[href]元素...

【解决方案3】：

随便看看吧：悬停http://www.xs4all.nl/~peterned/csshover.html。这个宝贝解决了各种奇怪的 IE6 悬停问题，可能会解决你的问题。

【讨论】：

【解决方案4】：

除了<a> 之外的任何内容都没有:hover...上帝啊，我喜欢这个浏览器。

尝试在位置方便的<a> 上使用 :hover（如果它是链接列表，就像大多数 CSS 悬停菜单一样，这不会有问题），或者只是使用 Javascript，正如已经建议的那样。

【讨论】：

【解决方案5】：

正如Tal 所写。我不知道它是如何与表格一起工作的，但这个例子在 IE6 中完美运行。

http://www.cssplay.co.uk/menus/final_drop.html

【讨论】：