2

我为一个项目制作了一个 3d 类型的菜单，自然 IE 会导致问题，因为 IE10+，即使 3d-transforms 工作，也不支持 transform-style:preserve-3d。我尝试了解决方法，通过对 3d 菜单容器的每个子元素应用变换，但动画看起来很糟糕，至少可以这么说。决定为 IE 完全放弃 3d，但无法为 IE10+ 使用条件样式表，我尝试以这种方式检测 preserve-3d 属性值：

var detect = document.createElement("div");
detect.style.transformStyle = "preserve-3d";
if (detect.style.transformStyle.length > 0) {
  document.getElementsByTagName("html")[0].className = "preserve3D";
}

我注意到 IE9+ 在上述情况下返回长度 0，因为它不理解该值，因此不理会 HTML 标记。Chrome 和 FF 知道 preserve-3d，因此添加了该类。我只能通过将 IE11 的用户代理字符串设置为 IE9 和 IE10 来测试这一点。

我的第一个问题是：我是否可以期望这种方法（通过在 IE11 中设置用户代理进行测试）是一种故障安全方法，还是我需要掌握真正的 IE9 和 IE10？

我的第二个问题：以上述方式测试值是否有缺点？有没有更优雅、更好、（未来）更安全的方式？按照我的预期，IE10+采用preserve-3d应该是比较安全的，还是我错了？

4

0 回答 0