css - 奇怪的 :active behavior in IE8

Question

我在使用 IE8 时遇到问题，当在链接内单击图像时，IE 不会触发 :active 选择器。

示例:

HTML:

<a href="#"><img src="http://www.w3schools.com/images/pulpit.jpg"></a>

CSS:

a {
    display:inline-block;
    padding:10px;
    border:1px solid #F00;
}
a:hover {
    border-color:#0F0;
}
a:active {
    border-color:#00F;
}

现场演示:jsFiddle

当点击图片周围的区域时，链接正常运行，但当点击图片本身时，它无法更新。

关于为什么会发生这种情况以及是否有任何解决方法的任何想法？由于它主要是在工作，所以我不介意在需要时附加一些 JavaScript。

Answer 1

如果将状态放在 img 上可能会更好，但我无法摆脱轮廓。 http://jsfiddle.net/wSp7J/3/