内部没有触发IE 8中的：active状态

Question

我想设置标记:active所代表的按钮状态<a>。该<a>标签具有内<span>（怎么一回事，因为我要添加到该按钮的图标）。

我注意到:active除了Internet Explorer 8之外，其他所有状态均已正确触发。在IE8中，<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状态。

的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>覆盖的区域仍会捕获click事件，因此，当用户在此处单击时，他们将看不到:active状态。与以前的情况相比略有改善。