奇妙なIE7ホバーバグ/問題

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> 

誰もが知っています修理する？

[編集] このバグの修正が見つかりました。 私が交換する場合：メニューが8より小さいでもIEで素晴らしい作品しかし、私はそれがクロスブラウザのための良い解決策だとは思わない

#languages_menu ul li:hover a 

：

#languages_menu ul li a:hover 

をしてhover擬似クラスはIEより7未満では使用できません。

多くの感謝します！

Answer 1

あなたは、あなたのアンカーにHREFを追加する必要があります。ホバーは、そうでない場合は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 */ 
} 

Answer 2

ホバリングされていないリンクにデフォルトの背景色を追加します（白を使用します）。