Question

是否可以为CSS animation属性创建IE10 hack？

我正在使用它：

height: 70px\9;

但是这对animation不起作用。以下内容将停止适用于所有浏览器的动画：

animation: none\9;

我想在现有样式表中执行此操作，而不使用JavaScript或条件样式表。

Answer 1

这已经成为CSS中我见过的最奇特的边缘案例之一。我不得不说，对你来说找到了 - 好吧，绊倒了 - 这个。

\9 hack对animation属性失败的原因是，与大多数其他属性不同，以\9结尾的标识符实际上是{{3}的有效值接受标识符。在这种情况下，\9代表animation-name;最终做什么的浏览器是接受声明并寻找名为@keyframes的{{1}}规则，或者更确切地说，是一个由“无”字组成的标识符，后面跟着U + 0009字符制表，更为人所知作为制表符none\9，通常被认为是CSS中的空格。¹对原始动画的引用将丢失，因此该元素不再具有动画效果。

¹ _{从技术上讲，无论何时使用"\t" hack都会发生这种情况;黑客利用了这一事实，这通常会导致IE以外的浏览器出现解析错误。事实证明\9并非如此。}

如何解决你在IE10上停止动画的问题有点棘手。您可以使用animation-name黑客，但使用其他属性 - \9，此外，这要求您希望您的元素看起来与动画的相同且具有相同的样式在IE10中的起点，因为这实际上是在动画的起点冻结它：

animation-play-state

.element {
  width: 50px;
  height: 50px;
  background-color: yellow;
  animation: myanim 1s infinite alternate;

  /* Pause the animation at 0% in IE10 */
  animation-play-state: paused\9;
}

@keyframes myanim {
  0% { background-color: yellow; }
  100% { background-color: red; }
}

不幸的是我没有运行IE10的计算机来测试它，所以如果你发现IE11上的动画暂停，你需要添加另一个CSS规则，其中包含来自{{3}的以下选择器hack }：

<div class=element></div>

.element {
  width: 50px;
  height: 50px;
  background-color: yellow;
  animation: myanim 1s infinite alternate;

  /* Pause the animation at 0% in IE10 */
  animation-play-state: paused\9;
}

_:-ms-fullscreen, :root .element {
  /* Allow the animation to run in IE11 */
  animation-play-state: running;
}

@keyframes myanim {
  0% { background-color: yellow; }
  100% { background-color: red; }
}

如果您不想使用<div class=element></div>黑客，可以替换

\9

与

animation-play-state: paused\9;

但你肯定会要求IE11破解。无论哪种方式，这仍然依赖于具有与起点相同样式的静态CSS规则。

IE10 CSS攻击动画属性？

1 个答案: