<a> с внутренним <промежуток>, не инициировавший: активное состояние в IE 8
Я хочу разработать :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 }
6 ответов
Верно, ужасно сложное решение (и все еще несовершенное), но: если вы не поместите текст ссылки в , а вместо этого просто используйте как место для размещения фонового изображения и позиционирование его абсолютно в пределах , тогда (в основном) перестает блокировать : 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>
Конечно, область, которая охватывает все еще перехватывает событие щелчка, поэтому, когда пользователь щелкает там, он не увидит состояние : active . Это небольшое улучшение по сравнению с предыдущей ситуацией.
Хитрость: IE 8, похоже, не регистрирует тег как активный при нажатии на . (IE 6 и 7 работают нормально. Вы нашли регрессию!)
Однако он регистрирует тег как активный. Если вы можете применить все стили, которые вы хотите изменить для состояния :active, к , то 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. В приведенном выше примере текст меняет цвет при щелчке, но подчеркивание не меняется, поскольку стиль подчеркивания прикреплен только к ссылке (через стили браузера по умолчанию), а не к .
Может быть:
a.button span { ...
a.button span:hover { ...
подойдет?
В качестве альтернативы вы можете поместить вне . Кажется, это работает.
HTML
<span><a class="button" href="#">
Add a link
</a></span>
Тестовая страница: http://www.pauldwaite.co.uk/test-pages/2769392/2/
Была точно такая же проблема сегодня.
Попробуйте установить
z-index: -1; position: relative;
для диапазона.
Это то, что я придумал после прочтения этого поста.
На самом деле я написал длинный ответ с примерами кода и т. Д. И т. Д., Но при отступе кода css IE завис и вылетел ..
Я придумал решение, которое исправляет ошибку 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');
}
});
}
});