Question

出于各种原因，我想检查浏览器是否支持CSS3动画。我不想为此使用现代化器。

我所做的是以下内容：

var el = document.getElementById('test');
el.style.animation = 'example 5s';
el.innerHTML = el.style.animation;
console.log(el.style);

制作div和动画，并通过js将该动画应用到div。然后我继续读取div的样式以检查动画属性是否为空（浏览器无法正确解释动画）。

除IE9外，其他地方都可以使用。

IE9 console.log向我显示

动画＆＃34;示例5s＆＃34;

并因此将样式报告为已成功设置，即使它无法解释它。

那里发生了什么？我怎样才能确保IE9表现出预期的方式呢？

请看小提琴：https://jsfiddle.net/8dkevm0c/21/

Answer 1

问题是，如果属性不受支持，浏览器只会使用该值将新子项添加到style对象。您可以将animation替换为任何内容，nonexistentProperty或其他任何内容，然后它将在所有浏览器中使用相同的内容。所以你不能以这种方式测试适当的支持。

这个解决方案，我在这页上可耻地偷走了：
http://lea.verou.me/2009/02/check-if-a-css-property-is-supported/
是在JavaScript中使用if ('property' in document.body.style)。

＆＃13;

var el = document.getElementById('test');
if ('animation' in document.body.style) {
  el.style.animation = 'example 5s';
  el.innerHTML = el.style.animation;
  console.log(el.style);
}
else
  el.innerHTML = 'Sorry, no animation';

＆＃13;

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    border: 1px solid;
}

＆＃13;

<div id="test">
  tes
</div>

＆＃13;

免责声明：我在这里没有IE9，所以我不能100％保证这种方法。它可以在最新的浏览器中正常工作。

IE9 CSS3属性已应用但不受支持

1 个答案: