<a> с внутренним <span>не запускается: активное состояние в IE 8

Question

Я хочу стилизовать состояние :active кнопки, представленной тегом <a>. Тег <a> имеет внутренний <span> (потому что я хочу добавить значок к этой кнопке).

Я заметил, что состояние :active правильно запускается во всем, кроме Internet Explorer 8. В IE 8, кажется, что область вокруг <span> (заполнение <a>) вызывает состояние :active, но при нажатии непосредственно на текст в пределах <span> состояние :active не вызывается.

Есть ли способ исправить это, не прибегая к Javascript?

HTML

<a class="button" href="#">
 <span>Add a link</span>
</a>

CSS

a.button { some styles }
a.button:active { some other styles }

Answer 1

Правильно, ужасно сложное решение (и все еще несовершенное), но: если вы не заключаете текст ссылки в <span>, а вместо этого просто используете <span> в качестве места для размещения фонового изображения и поместите его абсолютно в <a>, тогда <span> (в основном) перестанет блокировать состояние :active.

Тестовая страница: http://www.pauldwaite.co.uk/test-pages/2769392/3/

HTML

<a class="button" href="#">
<span></span>Link
</a>

CSS

<style type="text/css">
a.button {
    position: relative;
    padding: 10px;
    color: #c00;
}

a.button:active {
    color: #009;
    font-weight: bold;
}

a.button span {
    position: absolute;
    top: 50%;
    left: 3px;
    margin-top: -2px;
    border: solid 2px #000;
}
</style>

Конечно, область, охватываемая <span>, все еще удерживает событие щелчка, поэтому, когда пользователь нажимает там, он не увидит состояние :active. Это небольшое улучшение по сравнению с предыдущей ситуацией.

Answer 2

У меня была такая же проблема, и, наконец, понял это: Вам нужна цель в теге <a>, т. Е. Добавьте атрибут "href" в тег * <a>:

<a id="logonButton" class="button submit" href="@Url.Action("Index", "Home")"><span>Log On</span></a>

Работает как шарм во всех версиях IE. :)

Answer 3

Tricky: IE 8, похоже, не регистрирует тег <a> как активный при нажатии <span>.(IE 6 и 7 в порядке. Вы обнаружили регрессию!)

Однако он регистрирует тег <span> как активный.Если вы можете применить все стили, которые вы хотите изменить для состояния :active, к <span>, то IE 8 подойдет, например

a.button:active,
a.button span:active/* This selector is for IE 8 only */ {
    color: #009;
    font-weight: bold;
}

Тестовая страница: http://www.pauldwaite.co.uk/test-pages/2769392/

Любые стили, которые применяются только к ссылке, в IE 8 не изменятся.В приведенном выше примере текст меняет цвет при щелчке, но подчеркивание - нет, поскольку стиль подчеркивания присоединяется только к ссылке (через стили браузера по умолчанию), а не к <span>.

Answer 4

Вы можете исправить это используя:

$('.yourspan').mousedown(function(){
    $(this).parents('.youranchor:first').css("background-position","bottom");   
}); 
$('.yourspan').mouseup(function(){
    $(this).parents('.youranchor:first').css("background-position","top");  
});

Answer 5

Я придумал решение, которое исправляет ошибку ie8 с помощью jquery. Это неразумное использование ресурсов для такой незначительной ошибки, но приложение, над которым я работал, уже использовало много jQuery, так что это не имело значения.

HTML

<a href="#" class="btn"><span>Button</span></a>

CSS

a.btn:active,
a.btn.ie8:hover { /* <-ie8 hack */
    /* mouse down state a.btn style */
}

a.btn:active span,
a.btn.ie8:hover span { /* <-ie8 hack */
    /* mouse down state a.btn span style */
}

Jquery

$(document).ready(function() {

    var isIE8 = ($.browser.msie == true && $.browser.version == "8.0") ? true : false;

    if (isIE8 === true) {
        $("a.btn").bind({
            mousedown: function() {
                $(this).addClass('ie8');
            },
            mouseleave: function() {
                $(this).removeClass('ie8');
            }
        });
    }
});

Answer 6

У меня была точно такая же проблема сегодня.

Попробуйте установить

z-index: -1; position: relative;

на пролете.

Это то, что я придумал после прочтения этого поста.

Я на самом деле написал длинный ответ, с примером кода и т. Д. И т. Д., Но, в то время как отступал от кода css, IE задохнулся и упал.

Answer 7

Кроме того, вместо <a> можно поставить <span>. Кажется, это работает.

HTML

<span><a class="button" href="#">
 Add a link
</a></span>

Тестовая страница: http://www.pauldwaite.co.uk/test-pages/2769392/2/

Answer 8

Может быть:

a.button span { ...
a.button span:hover { ...

будет работать?