Question

这是我的小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>

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

[编辑] 我刚刚找到了解决这个bug的方法。如果我替换：

#languages_menu ul li a:hover

。通过

#languages_menu ul li:hover a

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

非常感谢ERIC！

Answer 1

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

Answer 2

你需要将href添加到你的锚点，a：IE7不会拾取悬停：否则：

<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  */
}

奇怪的IE7悬停Bug /问题

2 个答案: