如何针对特定情况（如Internet Explorer特定的CSS或特定于Internet Explorer的JavaScript代码）仅针对Internet Explorer 10？

如何针对特定情况（如Internet Explorer特定的CSS或特定于Internet Explorer的JavaScript代码）仅针对Internet Explorer 10？

我试过这个，但是不起作用： 

<!--[if IE 10]> <html class="no-js ie10" lang="en"> <![endif]--> <!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Internet Explorer 10将忽略条件注释，并使用<html lang="en" class="no-js">而不是<html class="no-js ie10" lang="en"> 。

也许你可以尝试一些像这样的jQuery： 

 if ($.browser.msie && $.browser.version === 10) { $("html").addClass("ie10"); }

要使用此方法，您必须包含jQuery Migrate库，因为此function已从主jQuery库中移除。

为我工作得很好。 但是，一定不能替代有条件的评论！

我不会使用JavaScript navigator.userAgent或$ .browser （使用navigator.userAgent ），因为它可能被欺骗。

瞄准Internet Explorer 9,10和11（注意：也是最新的Chrome）： 

 @media screen and (min-width:0\0) { /* Enter CSS here */ }

要定位Internet Explorer 10： 

 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS here */ }

定位边缘浏览器： 

 @supports (-ms-accelerator:true) { .selector { property:value; } }

资料来源：

  • 将Internet Explorer特定的CSS移动到@media块
  • 如何在CSS中定位Internet Explorer 10和11
  • 用于Windows 10的CSS Hacks和Microsoft的Edge Web浏览器

我在这个网站上find了一个解决scheme，有人有一个宝贵的评论 ：

解决scheme是： 

 if (Function('/*@cc_on return document.documentMode===10@*/')()){ document.documentElement.className+=' ie10'; }

它

  • 不需要有条件的评论;
  • 即使评论剥离压缩/处理工程;
  • 在Internet Explorer 11中没有添加ie10类;
  • 在Internet Explorer 10兼容模式下运行的Internet Explorer 11更可能按预期工作;
  • 不需要独立的脚本标签（只能添加到头部的其他JavaScript代码）。
  • 不需要jQuery来testing

Internet Explorer 10不会尝试读取条件注释。 这意味着它将像对待任何其他浏览器一样对待条件注释：因为常规的HTML注释意味着完全被忽略。 以问题中给出的标记为例，包括IE10在内的所有浏览器都将忽略注释部分，完全用灰色突出显示。 HTML5标准没有提到条件注释语法，这正是他们select在IE10中停止支持它的原因。

但请注意，JScript中的条件编译仍受支持，如注释和最近的答案所示。 它不会在最终版本中消失， 不像jQuery.browser 。 当然，不言而喻，用户代理嗅探依然如此脆弱，在任何情况下都不能使用。

如果你真的必须瞄准IE10，要么使用条件编译，在不久的将来仍然可以看到支持，或者更好 – 使用Modernizr等function检测库而不是浏览器检测。 听起来相当麻烦，但请记住，作为一个现代的浏览器，高度符合今天的Web标准1 ，假设你已经编写了高度兼容的兼容代码，你不应该为IE10留出特殊的代码，除非绝对必要，即它在行为和渲染方面应该与其他浏览器相似。 2根据IE的历史logging，这听起来很牵强，但是你有多less次期待Firefox或Chrome浏览器能够以同样的方式行事？

  • Firefox不支持多年前没有提前box-sizing
  • 火狐浏览器历来有奇怪的大纲行为 ，多年来也是如此
  • 当涉及到定位的表格单元格时 ， Firefox拒绝行为合理 ，引用未定义的行为作为借口，而其他浏览器似乎应付得很好
  • Safari和Chrome浏览器在某些 CSS select器 上 遇到 了 很多 麻烦 ，有时修复会让你回到IE5，IE6和IE7的良好时代
  • Chrome在整个重绘部门似乎有很多麻烦，例如在更新媒体样式时不能正确地重新排版布局。 似乎铬的一半错误可以简单地工作，只有通过强制重绘，再次IE5 / 6/7级的东西
  • WebKit的几个版本已经被公认为支持某些特征的彻头彻尾的谎言 ，这意味着他们实际上打败了所有事物的特征检测机制

如果你确实有一个合法的理由针对某些浏览器，通过一切手段嗅出来。 我只是说，今天你会比以前更难以find这样一个理由，而这实际上并不是你可以依赖的。

1 不仅IE10，IE9，甚至IE8处理大多数成熟的CSS2.1标准，远远超过Chrome，因为IE8非常注重标准遵从性（当时CSS2.1已经非常稳定，只有很小的差别从今天的推荐来看），而Chrome似乎不过是尖端伪标准的半抛光技术演示。

2 当我这样说的时候，我可能会有偏见，但是确实如此。 如果你的代码在其他浏览器中工作，但不是IE浏览器， 那么与你自己的代码而不是IE10相比， 这个问题的可能性要比3年前IE浏览器的早期版本要好得多。 再一次，我可能会有偏见，但说实话， 你不是吗？ 只要看看你的意见。

IE标准支持文档是一个很好的起点。

以下是如何在JavaScript中使用IE10： 

 if ("onpropertychange" in document && !!window.matchMedia) { ... }

以下是如何在CSS中定位IE10： 

 @media all and (-ms-high-contrast: none) { ... }

如果IE11需要通过CSS进行过滤或重置，请参阅另一个问题： 如何为IE 11写一个CSS黑客？

我写了一个名为Layout Engine的小型vanilla JavaScript插件，它允许您以不能伪造的简单方式检测IE 10（和其他所有浏览器），不像用户代理嗅探那样。

它将呈现引擎名称添加为html标记中的类，并返回包含供应商和版本的JavaScript对象（在适当的情况下）

看看我的博客文章： http : //mattstow.com/layout-engine.html并获取GitHub上的代码： https ： //github.com/stowball/Layout-Engine

这两个解决scheme张贴在这里（稍作修改）工作： 

 <!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className='ie10';}</script><!--<![endif]-->

要么 

 <script>if(Function('/*@cc_on return 10===document.documentMode@*/')()){document.documentElement.className='ie10';}</script>

您的CSS链接之前，您的HTML页面的头标记内包括上述任一行。 然后在css文件中指定具有“ie10”类的样式作为父类： 

 .ie10 .myclass1 { }

瞧！ – 其他浏览器保持不变。 你不需要jQuery。 你可以看到我在这里实现的例子： http : //kardash.net 。

我使用这个脚本 – 这是过时的，但是有效地定位一个单独的 Internet Explorer 10样式表或JavaScript文件， 只有当浏览器是Internet Explorer 10时才会包含这个文件，就像使用条件注释一样。 没有jQuery或其他插件是必需的。 

 <script> /*@cc_on @if (@_jscript_version == 10) document.write(' <link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />'); @end @*/ </script >

您可以使用PHP为IE 10添加样式表

喜欢： 

 if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) { <link rel="stylesheet" type="text/css" href="../ie10.css" /> }

如果您必须这样做，您可以在JavaScript中检查用户代理string： 

 var isIE10 = !!navigator.userAgent.match(/MSIE 10/);

正如其他人所提到的，我总是推荐function检测。

如果您想要使用Vanilla JavaScript来定位IE 10，您可能需要尝试CSS属性检测： 

 if (document.body.style.msTouchAction != undefined) { document.body.className = 'ie10'; }

CSS属性

您也可以使用这些CSS属性之一，而不是msTouchAction ，因为它们目前仅在IE 10中可用。但是这可能会在将来改变。

  • msTouchAction
  • msWrapFlow
  • msWrapMargin
  • msWrapThrough
  • msScrollLimit
  • msScrollLimitXMin
  • msScrollLimitYMin
  • msScrollLimitXMax
  • msScrollLimitYMax
  • msFlexbox
  • msFlex
  • msFlexOrder

testing页面

我已经在CodePen上放置了一个包含所有属性的testing页面 。

clipBoardData是一个只在IE中可用的function，所以如果你正在寻求所有IE版本的目标，你可以使用 

 <script type="text/javascript"> if (window.clipboardData) alert("You are using IE!"); </script>

IE10 +和IE9的CSS 

 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ styles */ } @media screen\0 { /* IE8,9,10 styles*/ }

您可以使用function检测来查看浏览器是否为IE10或更高版本，如下所示： 

 var isIE = false; if (window.navigator.msPointerEnabled) { isIE = true; }

只有> IE9才是真的

Conditionizr （请参阅文档）将添加浏览器CSS类到您的html元素，包括ie10。

我只是想添加我的IE检测版本。 它基于http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/上的代码片段，并扩展为支持ie10和ie11。; 它检测IE 5到11。

所有你需要做的就是添加它的地方，然后你总是可以检查一个简单的条件。 如果不是IE，全局isIE将是未定义的，否则将是版本号。 所以你可以很容易地添加if (isIE && isIE < 10)或类似的东西。 

 var isIe = (function(){ if (!(window.ActiveXObject) && "ActiveXObject" in window) { return 11; /* IE11 */ } if (Function('/*@cc_on return /^10/.test(@_jscript_version) @*/')()) { return 10; /* IE10 */ } var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i'); while ( div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', all[0] ); return v > 4 ? v : undef; }());

使用JavaScript： 

 if (/Trident/g.test(navigator.userAgent)) { // detect trident engine so IE document.getElementsByTagName('html')[0].className= 'no-js ie'; }

适用于所有IE。 

 IE08 => 'Trident/4.0' IE09 => 'Trident/5.0' IE10 => 'Trident/6.0' IE11 => 'Trident/7.0'

所以用/Trident/x.0/g改变/Trident/g ，其中x = 4, 5, 6或7 （或者将来可能是8 ）。

对于我来说，下面的代码工作正常，所有条件注释都可以在所有IE版本中使用： 

 <!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 11)|!(IE)]><!--> <html> <!--<![endif]--> <script> if (document.documentMode===10){ document.documentElement.className+=' ie10'; } else if (document.documentMode===11){ document.documentElement.className+=' ie11'; } </script>

我在Windows 8.1上，不知道它是否与ie11更新…

这里是我如何为Internet Explorer自定义CSS：

在我的JavaScript文件中： 

 function isIE () { var myNav = navigator.userAgent.toLowerCase(); return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false; } jQuery(document).ready(function(){ if(var_isIE){ if(var_isIE == 10){ jQuery("html").addClass("ie10"); } if(var_isIE == 8){ jQuery("html").addClass("ie8"); // you can also call here some function to disable things that //are not supported in IE, or override browser default styles. } } });

然后在我的CSS文件中，定义每个不同的风格： 

 .ie10 .some-class span{ ....... } .ie8 .some-class span{ ....... }

退房http://suhasrathod.wordpress.com/2013/04/29/ie10-css-hacks/ 

 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10-specific styles go here */ }

这个答案让我有90％的方式。 我在Microsoft网站上find了我的答案的其余部分。

下面的代码是我用来定位所有即通过添加.ie类到<html>

使用jQuery（不推荐使用.browser支持1.9+的用户代理，请参阅http://api.jquery.com/jQuery.browser/ ）来添加.ie类： 

 // ie identifier $(document).ready(function () { if (navigator.appName == 'Microsoft Internet Explorer') { $("html").addClass("ie"); } });

如果您不介意针对IE10及以上版本和非IE浏览器，则可以使用以下条件注释： 

 <!--[if gt IE 9]><!--> Your code here. <!--<![endif]-->

派生自http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither

如果您确实需要，可以通过将以下行添加到<head>来进行条件注释： 

 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

资源

现代解决scheme的CSS 

 html[data-useragent*='MSIE 10.0'] .any { your-style: here; }
Interesting Posts