Блог

У меня есть следующий код:

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

Вот как это выглядит в браузере:

Он ВЫГЛЯДИТ именно так, как я хочу, во всех браузерах (даже IE7 ). Он даже отлично работает во всех браузерах, кроме (ни для кого не удивительно) IE. Во всех браузерах, кроме IE, пользователь может щелкнуть в любом месте на «кнопке», чтобы перейти по ссылке (с отличным эффектом нажатия маленькой кнопки). IE (все версии, даже 9) не позволяет пользователю нажимать в любом месте кнопки. Вместо этого пользователь должен щелкнуть по тексту, чего я совсем не хочу.

Итак, каков обходной путь для этого? Я попытался добавить «zoom: 1» к тегу привязки, и это, похоже, не имело никакого значения. Очевидно, IE знает, что элемент привязки должен быть похожим на кнопку блоком, поскольку он отображает его как таковой, однако он не будет регистрировать никаких щелчков (или событий наведения курсора, если на то пошло), если мышь не находится непосредственно над текстом «Категория x».

Решил эту проблему, установив для тега привязки прозрачное фоновое изображение размером 1 на 1 пиксель (без повторов). IE и все другие браузеры по-прежнему отображают внешний вид кнопок с помощью градиентов CSS, только теперь вся кнопка доступна в IE, а также во всех других браузерах.