< a>内部< span>不触发:IE 8中的活动状态 [英] <a> with an inner <span> not triggering :active state in IE 8
问题描述
我想设计一个由< a>
标记代表的按钮的:active
。 < a>
标签具有内部< span>
(beacuse我要为此按钮添加图标)。
I want to style the :active
state of a button that is represented by an <a>
tag. The <a>
tag has an inner <span>
(beacuse I want to add an icon to this button).
我注意到除了Internet Explorer 8之外的所有东西都正确触发了:active
看起来< span>
(< a>
code>> 状态,但直接点击
< span>
:
I notice the :active
state is triggered properly in everything but Internet Explorer 8. In IE 8, it appears that the area around the <span>
(the <a>
’s padding) triggers the :active
state, but when clicking directly on the text within the <span>
, the :active
state is not triggered.
有没有办法解决这个问题,而不使用Javascript?
Is there a way to fix this without resorting to Javascript?
<a class="button" href="#">
<span>Add a link</span>
</a>
CSS
CSS
a.button { some styles }
a.button:active { some other styles }
推荐答案
正确,过度复杂的解决方案(并且仍然不完美),但是:如果不将链接文本包装在< span&
,而只是使用< span>
作为一个地方放置你的背景图片并将其绝对定位在 < a>
,则< span>
(大多数)会阻止:active
状态。
Right, terribly over-complicated solution (and still imperfect), but: if you don’t wrap the link text in the <span>
, and instead just use the <span>
as a place to put your background image and position it absolutely within the <a>
, then the <span>
(mostly) stops blocking the :active
state.
测试页: http://www.pauldwaite.co.uk/test-pages/2769392/3/
<a class="button" href="#">
<span></span>Link
</a>
CSS
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
状态。这是对以前的情况略有改善。
Of course, the area that the <span>
covers still traps the click event, so when the user clicks on there, they won’t see the :active
state. It is a slight improvement on the previous situation.
这篇关于< a>内部< span>不触发:IE 8中的活动状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!