css - CSS Pseudo Active : Why wont :active background position shift wont work in IE?

Question

EXAMPLE : http://jsfiddle.net/9BygQ/5/

If you test the example in Chrome you will see that on :active the button appears pressed in. Why does the active pseudo state not seem to have any effect in IE?

This problem has been bothering me for a while now...

Love some help!

Cheers

Answer 1

这里至少有一个提示：

您可能已经在 IE 上看到按钮右侧的 :active 触发器。即 10px padding-right 区域。所以看起来当你在你<span>的上方时<a>，IE会激活:hover而不是:active。（我可能是错的，我发现这种行为只是通过点击到处:)）

所以我尝试反转<a>并且<span>它几乎可以工作（图像右侧仍然有问题）

这是新代码

HTML <a><span>SEXY BUTTON</a></span></a>

CSS span  a{  background:url('http://thebeer.co/imgs/UI/sprite.png') right -548px  no-repeat; padding-right:10px;  color:#CCC; font-size:12px;}

span{width:200px;display:block;background:url('http://thebeer.co/imgs/UI/sprite.png') -1348px -475px  no-repeat; padding:10px 11px;  padding-right:2px; text-align:center; font-family:medium; text-transform:uppercase; letter-spacing:1px;}

a:hover{color:#F97216;}
a:active{background-position:right -584px; color:#666;  cursor:pointer;}
a:active > span  {background-position:-1348px  -511px ;}

我不确定这会解决你的问题，但我希望它会有所帮助:)