<a>具有内部 <span>不触发:IE 8 中的活动状态 [英] <a> with an inner <span> not triggering :active state in IE 8

问题描述

我想为由 标记表示的按钮的 :active 状态设置样式. 标签有一个内部 (因为我想给这个按钮添加一个图标).

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

我注意到 :active 状态在除 Internet Explorer 8 之外的所有东西中都被正确触发.在 IE 8 中，( 的填充)触发 :active 状态，但是当直接点击 内的文本时，:active 状态未触发.

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

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

推荐答案

正确的，非常复杂的解决方案(仍然不完美)，但是:如果您不将链接文本包含在 ;，而只是使用 作为放置背景图像的地方，并将其绝对定位在 中，然后 <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

<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> 状态.比之前的情况略有改善.

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