画像がInternet Explorerでリンクとして表示されない

Question

CSSとJavaScriptで効果を組み合わせたメニューバーをデザインしています。それは上に乗ったときに現れるテキストの下に大きなアイコンで構成されています。それはイントラネット上に展開されるので、IE 7,8、およびFirefoxでのみ実行する必要があります。もちろん、Firefoxは、HTMLが直感的に思えるものを実行しているように見えます。大きなクリック領域を持つ大きなブロックリンクが表示されます。しかし、IE7では、JavaScriptのリンクのように動作し、（透明な背景画像を追加してハッキングした後に）正しくホバーするブロックリンクを表示しますが、クリックすると指のカーソルやhrefに従わなくなります。

興味深いことに、画像を囲むリンク領域には指のカーソルがありますが、画像をマウスでクリックするとすぐに矢印に戻ります。

<div id="navigation">   
<ul> 
<li><a href="#" onMouseOver="vtoggle('txtHome');" onMouseOut="vtoggle('txtHome');"> 
<span class="icon"><img src="iconImage.png" alt="Home" /></span> 
<span class="icontxt" id="txtHome" style="visibility:hidden;">Home</span> 
</a></li> 
... 
</ul> 
</div> 

<script type="text/javascript"> 
function vtoggle(x) { 
    if (document.getElementById(x).style.visibility == 'hidden') { 
     document.getElementById(x).style.visibility = 'visible'; 
    } else { 
     document.getElementById(x).style.visibility = 'hidden'; 
    } 
} 
</script> 


#navigation{ 
margin:0px auto; 
padding:0px; 
padding-left:10px; 
height:64px; 
list-style:none; 
} 
#navigation li{ 
float:left; 
clear:none; 
list-style:none; 
} 
#navigation li a, #navigation li a:link{ 
color:#fff; 
display:block; 
font-size:12px; 
text-decoration:none; 
padding:8px 18px; 
margin:0px; 
margin-left:-20px; 
width:80px; 
height:64px; 
background:url(../images/transparent.gif); 
} 
#navigation li a:hover{ 
background:url(../images/glow.png); 
background-repeat:no-repeat; 
background-position:10px -2px; 
} 
.icon{ 
float:left; 
width:100%; 
text-align:center; 
} 
.icontxt{ 
float:left; 
font-size:10px; 
color:white; 
font-weight:bold; 
clear:left; 
text-align:center; 
width:100%; 
margin-top:-1px; 
} 

ご協力いただきまして誠にありがとうございます。

- 編集 - 私は私の問題を解決し （私は大会に合わせて以下の答えを投稿します）が、私はまだあなたのすべてが心配している場合はIEが

<a href="#"><span><img /></span></a> 

Answer 1

私はこの問題を解決しました。私はアイコンの周りのSPANタグを削除する必要がありました。

は、ここに私の新しいHTMLコードです：

<li><a href="#" onMouseOver="vtoggle('txtHome');" onMouseOut="vtoggle('txtHome');"> 
<img src="images/webapp48/profile.png" alt="Home" /> 
<span class="icontxt" id="txtHome" style="visibility:hidden;">Home</span> 
</a></li> 

私は書式を保持するためのリンクタグに私のspanタグでCSSの一部を移動しました。これで正常に動作しますが、SPANタグがリンクを無効にする理由はまだわかりません。

Answer 2

を許可しない理由を聞くしたいと思いますカーソルがあり、リンク自体が機能している場合は、CSSで追加できます。

cursor: hand; 

希望します。

Answer 3

SPANがBLOCKに設定されていないことを確認してください。同じ事が私に起こった。