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

IE9 CSS3 property applied but not supported

本文关键字：支持 应用 CSS3 属性 IE9      更新时间：2023-09-26

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

我所做的是：

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

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

这适用于除IE9以外的所有地方。

IE9控制台日志显示

动画"示例5s"

并且因此报告样式被成功设置，即使它不能解释它。

那里发生了什么事？我该如何确保IE9的行为符合预期？

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

问题是，对于不受支持的属性，浏览器只需向具有该值的style对象添加一个新的子对象。您可以将animation替换为任何东西，nonexistentProperty或其他任何东西，然后它在所有浏览器中都可以正常工作。所以你不能用这种方式来测试适当的支持。

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

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';
@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;
}
<div id="test">
  tes
</div>

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

相关文章：