CSS背景圖片精靈位置過渡在IE10中有不同的方向

Question

我正在創建一個帶有背景圖片精靈的鏈接按鈕，該過渡位於：hover。它在除IE之外的所有瀏覽器都很好，這似乎重置了過渡方向。

See a jsFiddle demo here或video of IE10 here或看到的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} 

預期的行爲是爲它平滑地過渡了，然後背下來。這就像一個填充行爲搞砸了嗎？

任何幫助非常感謝！

Answer 1

它看起來像一個錯誤，其中原始的背景位置沒有被正確地記住以轉換回或等等。

我不知道IE10爲什麼這樣做的確切原因，但您可以通過將背景位置明確設置爲垂直偏移值的非零值來修復它。例如：

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

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