内部<span>未触发的<a>: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

是的，非常复杂的解决方案（并且仍然不完美），但是：如果您不\xe2\x80\x99t 将链接文本包装在 中<span>，而是仅使用<span>来放置背景图像并将其绝对放置在<a>，然后<span>（大部分）停止阻塞:active状态。

\n\n

测试页面：http://www.pauldwaite.co.uk/test-pages/2769392/3/

\n\n

超文本标记语言

\n\n

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

\n\n

CSS

\n\n

<style type="text/css">\na.button {\n    position: relative;\n    padding: 10px;\n    color: #c00;\n}\n\na.button:active {\n    color: #009;\n    font-weight: bold;\n}\n\na.button span {\n    position: absolute;\n    top: 50%;\n    left: 3px;\n    margin-top: -2px;\n    border: solid 2px #000;\n}\n</style>\n

\n\n

当然，被<span>覆盖的区域仍然会捕获点击事件，因此当用户点击那里时，他们将看不到\xe2\x80\x99的状态:active。与之前的情况相比，算是略有改善。

\n