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

2019年8月4日 157次阅读

我正在创建一个带有背景图像精灵的链接按钮,该按钮转换为：悬停.除了IE之外,它在所有浏览器中运行良好,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}

预期的行为是它平稳过渡然后向下.这就像填充行为以某种方式搞砸了？

任何帮助非常感谢！

最佳答案 它看起来像一个错误,原始的背景位置没有被正确记住以转换回来,或者其他一些错误.

我不知道IE10的行为的确切原因,但你可以通过明确地将background-position设置为垂直偏移值的非零值来修复它.例如：

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

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

点赞