Question

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

如果您在Chrome中测试该示例，则会看到on：active按下按钮。为什么激活的伪状态似乎在IE中没有任何影响？

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

喜欢一些帮助！

干杯

Answer 1

这至少是一个提示：

你可能已经在IE上看到了：按钮右侧的主动触发器。即10px填充右侧区域。因此，当您的<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 ;}

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

CSS Pseudo Active：为什么不会：主动背景位置转换在IE中不起作用？

1 个答案: