Question

我有幻灯片效果，您可以使用translateZ为屏幕底部和顶部的图像添加动画效果。

在我使用ie10,11的测试中，translateZ确实有效，但由于缺少对'transform-style: preserve-3d'的支持，使用嵌套的3d变换元素，效果看起来像是按比例放大而不是向上或向下移动屏幕。

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

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

此外，我对Internet Explorer的“边缘”感到有些困惑。版本，这与ie11有什么不同，它是否支持变换风格：preserve-3d，似乎看不到＆＃39; edge＆＃39;版本caniuse.com

谢谢

Answer 1

如果您只想检测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
  }
}

然而，许多人会建议你应该使用特征检测（如果可能的话 - 但我不确定你是否可以（轻松地）在这种情况下）

您可以在http://plnkr.co/edit/vogwUGai8iMavk5elDVB?p=preview

上关注哪些浏览器支持此功能

Answer 2

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

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

它为=E2&","&CHAR(10)&CHAR(10)&"Here are your tip numbers:"&CHAR(10)&CHAR(10)&"Cash Tips: "&"$"&ROUND(I2, 2)&CHAR(10)&CHAR(10)&"Credit Card Tips: "&"$"&ROUND(J2, 2)&CHAR(10)&CHAR(10)&"Form 4070's are due in the office by 4pm Wednesday and they are required by law from every tipped employee."&CHAR(10)&CHAR(10)&"Thank you."&CHAR(10)&CHAR(10)&"-- Management Team"添加了功能检测。 ie10＆amp;中缺少此功能11沿Z轴平移，表现不如预期。

transform-style: preserve-3d

将来，看起来Modernizr 3将具有var detect = document.createElement("div"); detect.style.transformStyle = "preserve-3d"; if ( !detect.style.transformStyle.length > 0 ) { $('html').addClass('no-preserve3D'); }的功能检测，但目前处于测试阶段...谢谢 dman2306获得该提示！

Answer 3

这里有一些相关问题的好解决方案： 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';

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

3 个答案: