4

我正在创建一个带有背景图像精灵的链接按钮，它在：悬停时转换。它在除 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}

预期的行为是它平稳地向上过渡然后向下过渡。就像 Fill 行为以某种方式搞砸了？

非常感谢任何帮助！

4

1 回答 1

2

它看起来像一个错误，原始背景位置没有被正确记住以转换回，或者类似的。

我不知道 IE10 这样做的确切原因，但您可以通过将背景位置显式设置为垂直偏移值的非零值来修复它。例如：

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

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

于 2013-01-08T19:24:32.930 回答