html - 和 在 中，只有 span 作为链接

Question

我有一个菜单，带有图标 (img) 和下方的文本 (span)。我希望它们都可以作为链接单击。我为菜单的每个元素都有这个 html:

<div class="menu_item">
    <a href="menu/viewTemplates.html">
        <img class="menu_icon" src="images/icons/template.png" alt="Templates"/>
        <span>Templates</span>
    </a>
</div>

当我点击 img 时，没有任何反应，但是当我点击 span 时，链接工作正常。这在 Chrome 和 Firefox 中都会发生。在我读过的所有地方，人们似乎都没有问题这样做，除了 IE，但这不是我的情况。拜托，关于什么可能导致这不起作用的任何想法？

我这样试过，效果不错:

<div class="menu_item">
    <a href="menu/downloadTemplates.html">
        <div class="menu_icon" id="lnkDownloadTemplates"></div>
        <span>Download</span>
    </a>
</div>

但我仍然想知道为什么另一种方式(应该是正确的)对我不起作用。

CSS:

.menu_item{
    height: 15%;
    width: 45%;
    text-align: center;
}
.menu_icon{
    width:auto;
    height:100%;
}

Answer 1

.menu_item {
  height: 15%;
  width: 45%;
  text-align: center;
}
.menu_item a {
  text-decoration: none;
}
.menu_item a .menu_icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

<div class="menu_item">
    <a href="menu/viewTemplates.html">
        <img class="menu_icon" src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="Templates"/>
        <span>Templates</span>
    </a>
</div>

这是否与您正在寻找的相同？

希望这对您有所帮助。