IE 6 中的圆角矩形鼠标悬停问题答案

【问题标题】：Rounded rectange mousehover issue in IE6IE 6 中的圆角矩形鼠标悬停问题
【发布时间】：2011-04-09 02:17:57
【问题描述】：

我正在做这个扩展选项卡菜单，但翻转图像在 IE6 中不起作用。有没有简单的方法来修复它？？

HTML

<ul class="menu">
<li class="active"><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
</ul>

示例文件张贴在这里.... Sample HTML

【问题讨论】：

仅供参考 IE6 仅支持 :hover 在<a> 元素上，这里还有许多其他 IE6 错误，这使得这很难按原样解决。查看一些 .htc :hover IE 解决方案，可能会有所帮助（也许）。

标签： css internet-explorer-6

【解决方案1】：

问题出在这个选择器上：

.menu span:hover

不幸的是，虽然 IE6 确实支持 :hover 选择器，但它只支持 a 元素，所以 a:hover 有效，但 span:hover 不支持。

这是 IE6 中许多损坏和缺失的功能之一。

好消息是有一个 hack 可以让 IE6 支持任何元素的:hover。它叫做Whatever:hover。

下载 .htc 文件并在您的样式表中添加对它的引用，如网站所述，它将解决这个特定的 IE6 问题。

说实话，这并不是 IE6 中唯一会伤害您的东西。如果可能的话，我的建议是放弃对 IE6 的支持。使用 IE6 的人数正在迅速下降，因此它的相关性越来越低（上次我检查时，它的浏览器市场份额不到 2%，而且每个月都在下降 25% 或更多——请参阅http://gs.statcounter.com/#browser_version-US-monthly-201003-201104)。只是不值得再支持了。

但话虽如此，如果这是您使用 IE6 时遇到的唯一问题，那么显然您应该使用whatever:hover hack——这几乎不费吹灰之力，而且它会解决这个问题，所以它显然值得它。

【讨论】：

+1，写得很好。比我在the same thing 的尝试要好。随便：hover ftw！
在一定程度上同意“drop IE”的说法。定位或鼠标悬停并不完美===谁在乎。网站无法使用？可能需要注意。

【解决方案2】：

您已经有了一些解决方案，但是：

当您将鼠标悬停在跨度上时，您也将鼠标悬停在链接上，因此请尝试让链接处理跨度。那也会让 IE6 满意。

a:hover span { }

【讨论】：

感谢 Erik...不知道我是怎么错过的.. :-)

【解决方案3】：

我之前遇到过这个问题，但我不记得它是否适用于 IE 6.0。简短的回答是您需要定义其余相关的伪类：http://www.w3schools.com/css/sel_hover.asp

注意：:hover 必须在 CSS 定义中的 :link 和 :visited （如果它们存在）之后才能生效！

尝试定义所有 4 个伪类，即使它们是空白的。

a:link    {}
a:visited {}
a:hover   {color:red;}
a:active  {}

如果一切都失败了，那么只需使用 jQuery 的 .hover() 函数： http://api.jquery.com/hover

【讨论】：