Question

我正在创建一个带有背景图片精灵的链接按钮，该按钮会转换为：悬停。除了IE之外，它在所有浏览器中运行良好，IE似乎重置了转换方向。

See a jsFiddle demo here或video of IE10 here或在此处查看css inline：

.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行为的确切原因，但你可以通过明确地将background-position设置为垂直偏移值的非零值来修复它。例如：

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

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

CSS背景图像精灵位置转换在IE10中向不同方向发展

1 个答案: