Как сделать так, чтобы в IE можно было кликать весь тег привязки, а не только текст? - PullRequest
Новая
       17

Как сделать так, чтобы в IE можно было кликать весь тег привязки, а не только текст?

0 голосов
/ 29 октября 2011

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

<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»."текст.

1 Ответ

2 голосов
/ 29 октября 2011

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

...