css - CSS Pseudo Active: IE でアクティブな背景位置シフトが機能しないのはなぜですか?

Question

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

Chrome で例をテストすると、:active でボタンが押されたように見えることがわかります。アクティブな疑似状態が IE で何の効果もないように見えるのはなぜですか?

この問題はしばらくの間私を悩ませてきました...

いくつかの助けが大好きです！

乾杯

Answer 1

少なくともヒントは次のとおりです。

IE では、ボタンの右側で :active がトリガーされるのを見たことがあるかもしれません。つまり、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 ;}

これで問題が解決するかどうかはわかりませんが、お役に立てば幸いです:)