Internet explorer 如何使整个锚定标记在IE中可点击，而不仅仅是文本？

我有以下代码：

<style>
    .moduletable-categories {
        margin: 1em 0;
    }
    .clear {
        overflow: hidden;
    }
    .menuitem-link {
        /* fill parent */
        display: block;
        zoom: 1;
    }
    #categories-nav .menuitem {
        display: block;
        width: 31.9148936170%;
        margin-right: 2.1276595744%;

        background: url('../images/cm-bottomnav-bg-point.png') repeat;

        float: left;
    }
    #categories-nav .menuitem-link {
        padding: .5em;
        margin: 4px;

        height: 70px;

        background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#000));
        background: -moz-linear-gradient(top, #888, #000);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#000000');

        font-size: 90%;
        text-transform: uppercase;
        font-weight: bold;

        vertical-align: top;
    }
    #categories-nav .menuitem-link:active {
        background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#888));
        background: -moz-linear-gradient(top, #000, #888);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#888888');

        color: #fcd3a5;
    }
    /* last menu item in #categories-nav */
    #categories-nav .menuitem.item-665 {
        margin-right: 0;
    }
</style>

<nav class="moduletable-categories clear">
    <ul class="menu" id="categories-nav">
        <li class="menuitem item-596">
            <a class="menuitem-link" href="/custom/category-1">Category 1</a>
        </li>
        <li class="menuitem item-597">
            <a class="menuitem-link" href="/custom/category-2">Category 2</a>
        </li>
        <li class="menuitem item-665">
            <a class="menuitem-link" href="/custom/category-3">Category 3</a>
        </li>
    </ul>
</nav>

.moduletable类别{
利润率：1米0；
}
.清楚{
溢出：隐藏；
}
.menuitem链接{
/*填充父对象*/
显示：块；
缩放：1；
}
#类别导航菜单项{
显示：块；
宽度：31.9148936170%；
保证金权利：2.1276595744%；
背景：url（'../images/cm bottomnav bg point.png'）重复；
浮动：左；
}
#类别导航菜单项链接{
填充：.5em；
保证金：4倍；
高度：70像素；
背景：-webkit渐变（线性、左上、左下、从（#888）到（#000））；
背景：-莫兹线性梯度（顶部，888，#000）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#8888888'，endColorstr='#000000'）；
字体大小：90%；
文本转换：大写；
字体大小：粗体；
垂直对齐：顶部；
}
#类别导航菜单项链接：活动{
背景：-webkit渐变（线性、左上、左下、从（#000）到（#888））；
背景：-莫兹线性梯度（顶部，#000，#888）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#000000'，endColorstr='#8888888'）；
颜色：#fcd3a5；
}
/*#类别导航中的最后一个菜单项*/
#类别导航菜单项-665{
右边距：0；
}

以下是它在浏览器中的外观：

它看起来正是我在所有浏览器（甚至IE7+）中想要的。它甚至在除IE之外的所有浏览器中都能完美工作（没人会感到意外）。在除IE之外的所有浏览器中，用户都可以点击“按钮”上的任意位置来跟随链接（还有漂亮的小按钮按下效果）。IE（所有版本，甚至9）不允许用户点击按钮上的任何地方。用户必须点击文本，这根本不是我想要的

---

那么，这个问题的解决方法是什么？我尝试在锚定标签中添加“zoom:1”，但这似乎没有任何区别。显然，IE知道锚元素应该是一个按钮状的块，因为它是这样呈现的，但是它不会注册任何点击（或悬停事件），除非鼠标直接位于“Category x”文本上。

通过将1px×1px透明背景图像设置到锚标记（无重复）来解决这个问题。IE和所有其他浏览器仍然通过CSS渐变呈现按钮外观，只是现在整个按钮可以在IE和所有其他浏览器中单击。

如果链接是作为框而不是文本链接，请始终在链接上使用

display:block

。没有理由进行攻击：）显示：链接上已经设置了block，第三个CSS规则（.menuitem link）证明了这一点，但是谢谢你的建议。哈，不知道我怎么能忽略这一点。可以使用lin高度而不是填充。这对你有用吗（对我有用）？：）