Question

我有以下代码：

<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>

以下是它在浏览器中的显示效果：

Renders Perfectly! 它看起来在所有浏览器（甚至是IE7 +）中我想要它的确切方式。它甚至可以在所有浏览器中完美运行，除了（对于没有人的惊喜）IE。在除IE以外的所有浏览器中，用户可以点击“按钮”上的任意位置来跟踪链接（同样具有漂亮的小按钮效果）。 IE（所有版本，甚至9）不允许用户点击按钮上的任何位置。用户必须单击文本，这根本不是我想要的。

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

Answer 1

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

如何在IE中制作整个锚标签，而不仅仅是文本？

1 个答案: