奇怪的 IE7 悬停错误/问题

Posted 2023-03-06

【中文标题】奇怪的 IE7 悬停错误/问题

【英文标题】：Weird IE7 Hover Bug/Problem

【发布时间】：2011-10-11 10:20:04

【问题描述】：

这是我的小 CSS 样式：

#languages_menu

  background: url('/images/langs.png') repeat-y;
  bottom: 40px;
  font-size: 0.9em;
  right: 10px;
  position: absolute;
  width: 90px;


#languages_menu ul, #languages_menu ul li

  list-style: none;


#languages_menu ul li a

  cursor: pointer;
  display: block;
  line-height: 22px;
  margin-left: 10px;
  text-decoration: none;
  width: 80px;


#languages_menu ul li a:hover

  background-color: #AEBDD2;
  color: #F00;


#languages_menu ul li a span.flag

  float: left;
  margin: 3px 5px 0 3px;

这是我的 html 代码（复制自开发者工具栏，所以不用担心，它是有效的）：

<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" -->
...
<DIV id=languages_menu><DIV class=topimg></DIV>
  <DIV>
    <UL>
      <LI><A class=en><SPAN class=flag></SPAN><SPAN class=name>English</SPAN></A></LI>
      <LI><A class=fr><SPAN class=flag></SPAN><SPAN class=name>Français</SPAN></A></LI>
      ...
    </UL>
  </DIV>
</DIV>

在 IE8、IE8Compatibility 和 IE9 以及所有其他浏览器中，:HOVER 的工作方式非常棒。但如果我切换到 IE7 或更低版本，鼠标悬停时锚点不会再改变。

最糟糕的是我在同一页面上还有其他类似的代码，并且在我切换到 IE7 后它们仍然可以工作，如下所示：

#navigation

  height: 22px;
  position: relative;
  width: 100%;


#navigation ul

  float: left;
  left: 50%;


#navigation ul, #navigation ul li

  float: left;
  list-style: none;
  position: relative;


#navigation ul li

  right: 50%;


#navigation ul li a

  color: #889DBF;
  display: block;
  line-height: 22px;
  padding-left: 20px;
  text-decoration: none;


#navigation ul li a b

  display: block;
  padding-right: 21px;


#navigation ul li.current a, #navigation ul li a:hover

  background: url('/images/navigation-left.png') no-repeat;
  color: #111B35;


#navigation ul li.current a b, #navigation ul li a:hover b

  background: url('/images/navigation-right.png') no-repeat 100% 0;
  color: #111B35;


<DIV id=navigation>
  <UL>
    <LI class=current><A href="#login"><B id=text_menu_login>Accedi</B></A></LI>
    <LI><A href="#register"><B id=text_menu_register>Registrati</B></A></LI>
    ...
  </UL>
</DIV>

任何人都知道为什么会发生这种情况以及如何解决它？

[编辑] 我刚刚找到了解决此错误的方法。 如果我替换：

#languages_menu ul li a:hover

与：

#languages_menu ul li:hover a

即使在 IE 小于 8 的情况下，菜单也能很好地工作。但我认为这不是一个很好的跨浏览器兼容性解决方案，因为 :hover 伪类不能在小于 7 的 IE 中使用。强>

非常感谢埃里克！

【问题讨论】：

别担心IE6！世界上只有不到 11% 的人使用它。甚至微软也在试图扼杀它ie6countdown.com

如果你的 中有一个 href="#"，这会改变行为吗？

如果您找到了解决方案，只需将代码放入仅在 IE7 中可见的条件 css 中。

【参考方案1】：

你需要添加href到你的锚点，否则IE7不会选择a:hover：

<A class=en href="#">

另一个技巧是在你的 CSS 中添加空规则：

#languages_menu ul li a:hover 
  /* all your hover rules go here */


#languages_menu ul li:hover a 
  /* keep this empty, triggers a:hover on IE7  */

【参考方案2】：

为您的非悬停链接添加默认背景颜色（仅使用白色）。