CSS 伪激活 : Why wont :active background position shift wont work in IE?

Question

示例: http://jsfiddle.net/9BygQ/5/

如果您在 Chrome 中测试该示例，您会看到在 :active 按钮显示为已按下。为什么 active 伪状态在 IE 中似乎没有任何效果？

这个问题困扰了我一段时间...

喜欢一些帮助!

干杯

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 ;}

我不确定这是否能解决您的问题，但我希望它能有所帮助:)