Komisch IE7 Hover-Bug/Problem

Dies ist meine kleine CSS-Stil:

#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;
}

Und dies ist mein HTML-code (kopiert von Developer Toolbar, also Mach dir keine sorgen, es ist gültig):

<!-- 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>

In IE8, IE8Compatibility und IE9 und alle anderen browser, der :HOVER-funktioniert wie ein Charme. Aber wenn ich wechseln auf IE7 oder weniger der Anker ändert sich nicht mehr auf die Maus über.

Das Schlimmste ist, dass ich anderen ähnlichen codes auf der gleichen Seite und Sie sind immer noch arbeiten, nachdem ich auf IE7, wie die folgende:

#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>

Jemand weiß, warum dies geschieht und wie man es beheben?

[BEARBEITEN]
Ich habe gerade einen fix für diesen Fehler.
Wenn ich ersetzen:

#languages_menu ul li a:hover

Mit:

#languages_menu ul li:hover a

Das Menü funktioniert Super, auch mit IE kleiner als 8. Aber ich glaube nicht, dass es eine gute Lösung für cross-browser-Kompatibilität, weil :hover pseudo-Klasse kann nicht verwendet werden, im IE kleiner als 7.

VIELEN VIELEN DANK ERIC!

  • Mach dir keine sorgen über IE6! Weniger als 11% der Welt nutzen es. Selbst Microsoft versucht, es zu töten off ie6countdown.com
  • Wenn Sie haben a href="#" innerhalb Ihrer <a>, nicht, dass das Verhalten ändern?
  • Wenn Sie schon die Lösung gefunden, einfach den code in eine bedingte css-sichtbar von IE7 nur.
Schreibe einen Kommentar