Изображения не будут отображаться как ссылки в 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>

Я переместил некоторые CSS из моего тега span в тег link, чтобы сохранить форматирование. Теперь это работает правильно, но я все еще озадачен, почему тег SPAN отключил бы ссылку.

Answer 2

Убедитесь, что ваш SPAN не установлен на BLOCK. То же самое случилось со мной.

Answer 3

Если все, что вас беспокоит, это курсор, и сама ссылка работает, вы можете добавить его с помощью CSS:

cursor: hand;

Надеюсь, это поможет!