浏览器在 jQuery 中检测 ie9 和 ie10,11答案

【问题标题】：Browser detect ie9, and ie10,11 in jQuery浏览器在 jQuery 中检测 ie9 和 ie10,11
【发布时间】：2015-11-24 09:12:57
【问题描述】：

我有一个幻灯片效果，您可以在其中使用translateZ 从屏幕底部和顶部对图像进行动画处理。

在我使用 ie10、11 的测试中，translateZ 确实可以工作，但由于它缺乏对 'transform-style: preserve-3d' 的支持，以及嵌套的 3d 转换元素，因此效果看起来像是在放大尺寸而不是在屏幕外向上或向下移动。

为了解决这个问题，如果检测到 ie10 或 11，并且如果检测到 ie9，则完全关闭效果，我决定强制效果使用 translateX 和 Y。

所以我正在寻找一种有效且值得信赖的方法来处理 jQuery 中 ie9、ie10、ie11 的浏览器检测。

另外我对 Internet Explorer 的“edge”版本有点困惑，这与 ie11 有什么不同，它是否支持 transform-style:preserve-3d，在caniuse.com 上似乎看不到“edge”版本

谢谢

【问题讨论】：

"IE Edge" = "IE 12"（或“11”之后的任何版本和修订）。这是 Windows 10 中发布的 IE 版本的一个花哨的产品名称。它应该能够做 IE 11 可以做的“一切”。不确定产品矩阵何时会开始分化。它不应该与“IE”混淆=edge" X-UA 兼容性设置..
不要使用浏览器检测，使用特征检测：modernizr.com
在 Modernizr 3（当前为测试版）中，您可以执行 Modernizr.addTest('preserve3d', Modernizr.testAllProps('transformStyle', 'preserve-3d')); 然后 Modernizr.preserve3d 会执行您想要的操作。
@dman2306 虽然您认为 Edge 是一个新的浏览器是正确的，但它是“从 Internet Explorer 的灰烬中诞生的”，并从 IE 中引入了一些渲染引擎部件......包括一些有问题的部分；-) 请参阅此答案的 (c) 部分 stackoverflow.com/questions/570642/…
@dman2306 我只是说“它是一个完全不同的浏览器”是一个有问题的陈述。 Edge 是 Microsoft 为 HTML5 及更高版本构建的全新常青浏览器。期待它变得越来越好，并与其他现代浏览器竞争。然而，它建立在 IE 的开端之上，支持与 IE 通过“ms”前缀所做的相同的内部供应商命名，并包括以前 Windows8+/IE 版本的呈现行为（错误/功能）。

标签： jquery browser-detection translate-animation

【解决方案1】：

对于相关问题，这里有一些很好的解决方案： IE10 and below Browser detection

我发现了一个很棒的 CodePen，它为所有版本的 IE 和 Edge 提供了完整的解决方案：

https://codepen.io/gapcode/pen/vEJNZN

从链接中，这里是window.navigator.userAgent 的各种值的示例：

  // IE 10
  // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';

  // IE 11
  // ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko';

  // Edge 12 (Spartan)
  // ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0';

  // Edge 13
  // ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586';

【讨论】：

【解决方案2】：

我找到了这个解决方案并相信现在这应该被认为是正确的答案：

IE9-11 detecting transform-style: preserve-3d

它为transform-style: preserve-3d 添加了特征检测。 ie10 和 11 中缺少此功能使得沿 Z 轴平移的行为不如预期。

var detect = document.createElement("div");
detect.style.transformStyle = "preserve-3d";
if ( !detect.style.transformStyle.length > 0 ) {
    $('html').addClass('no-preserve3D');
}

未来看起来 Modernizr 3 将具有transform-style: preserve-3d 的功能检测功能，但目前处于测试阶段...谢谢 dman2306 提示！

【讨论】：

【解决方案3】：

如果您只是想检测 IE11 及以下版本以提供其他服务，您可以使用它：

if(navigator.userAgent.indexOf('Trident') != -1){
  //This is Internet Explorer 11 or below
  //If you need to know if this is IE9 or above also you can run this
  if(typeof(document.addEventListener) != 'function'){
    //This is IE8 or below
  }
  if(typeof(window.msIndexedDB) != 'undefined'){
    //This is IE10 or higher
  }
}

但是很多人会建议您应该改用特征检测（在可能的情况下 - 但是我不确定在这种情况下您是否可以（轻松地））

您可以在CanIUse.com上关注哪些浏览器支持此功能

【讨论】：

感谢 sgunliffe，有没有办法进一步分解以区分不同的版本。我想我本可以更好地解释我的问题，但特征检测对我不起作用，因为 ie10 和 11 确实具有 3d 转换功能但实现很糟糕，所以我需要专门针对那些浏览器