CSS Pseudo Active：为什么在 IE 中不会：active 背景位置偏移？答案

【问题标题】：CSS Pseudo Active : Why wont :active background position shift wont work in IE?CSS Pseudo Active：为什么在 IE 中不会：active 背景位置偏移？
【发布时间】：2011-08-11 12:33:04
【问题描述】：

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

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

这个问题困扰了我好久...

喜欢一些帮助！

干杯

【问题讨论】：

你可能想看看这个stackoverflow.com/questions/5594102/…

标签： css internet-explorer button pseudo-class

【解决方案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 ;}

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

【讨论】：