图像不会在 Internet Explorer 中显示为链接答案

【问题标题】：Images Won't Show as Link in Internet Explorer图像不会在 Internet Explorer 中显示为链接
【发布时间】：2010-11-04 02:31:54
【问题描述】：

我正在设计一个结合了 CSS 和 JavaScript 效果的菜单栏。它由带有文本的大图标组成，当鼠标悬停在上面时会出现。它将部署在 Intranet 上，因此它只需要在 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>

【问题讨论】：

标签： javascript html css internet-explorer hyperlink

【解决方案1】：

确保您的 SPAN 未设置为 BLOCK。同样的事情发生在我身上。

【讨论】：

【解决方案2】：

我解决了这个问题。我不得不删除图标周围的 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 移到了 link 标签中以保留格式。现在它可以正常工作了，但我仍然不明白为什么 SPAN 标签会禁用链接。

【讨论】：

也许 IE 不认为 span 样式是其内部的一部分。也许这可以防止您可能遇到的其他问题，将样式组合到样式中——也许不会。

【解决方案3】：

如果你担心的只是光标，而链接本身可以工作，你可以用 CSS 添加它：

cursor: hand;

希望这会有所帮助！

【讨论】：

不，这些链接实际上不起作用。这真的会让用户感到困惑，在它不会点击的地方显示一只手！
IE 从版本 6 开始支持“指针”值（而不是非标准的“手”）。这些天没有理由使用手。