4

：hoverで遷移する背景画像スプライトを使用してリンクボタンを作成しています。遷移方向をリセットするように見えるIEを除いて、すべてのブラウザでうまく機能します。

こちらのjsFiddleデモまたはこちらのIE10のビデオをご覧になるか、こちらのcssインラインをご覧ください。

.button {
  background:url('http://blackspike.com/temp/icon-github.svg') 0 0 no-repeat; width: 30px; height: 30px; display: block; 
  -webkit-transition: background-position 0.3s ease; 
  -moz-transition: background-position 0.3s ease; 
  -ms-transition: background-position 0.3s ease; 
  transition: background-position 0.3s ease; 
}

.button:hover {background-position: 0 -30px}

予想される動作は、スムーズに上下に移行することです。塗りつぶしの動作がどういうわけか台無しになっているようなものですか？

どんな助けでも大歓迎です！

4

1 に答える 1

2

元の背景位置が正しく記憶されておらず、元に戻るなどのバグのようです。

IE10がそのように動作する正確な理由はわかりませんが、垂直オフセット値のbackground-positionをゼロ以外の値に明示的に設定することで修正できます。例えば：

.button { background-position: 0 1px; }

http://jsfiddle.net/aZqEa/22/

于 2013-01-08T19:24:32.930 に答える