在某些情况下，例如特定于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库，因为此功能已从主jQuery库中删除。

对我来说很好。但是肯定不能代替条件注释！

我不会使用JavaScriptnavigator.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; } 
}

资料来源：

我在这个网站上找到了一个解决方案，有人对此发表了宝贵的评论：

解决方案是：

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

它

不需要条件注释；
即使注释条压缩/处理也有效；
在Internet Explorer 11中没有添加ie10类；
与以Internet Explorer 10兼容模式运行的Internet Explorer 11更有可能按预期工作；
不需要独立的脚本标签（可以直接添加到其他JavaScript代码中）。
不需要jQuery进行测试

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

但是请注意，仍然支持JScript中的条件编译，如注释和最新答案所示。这不是最终版本要离开要么，不像jQuery.browser。当然，不用说，用户代理嗅探仍然像以往一样脆弱，在任何情况下都不应使用。

如果确实必须以IE10为目标，请使用有条件的编译（可能会在不久的将来获得支持），或者（如果可以帮助您）使用功能检测库（例如Modernizr）来代替（或与浏览器一起检测）。除非您的用例需要noscript或在服务器端安装IE10，否则用户代理嗅探将比可行的选择更令人头疼。

听起来很麻烦，但请记住，作为一个现代的浏览器这是高度符合的到今天的Web标准¹，假设你已经写了互操作的代码是高度符合标准，你不应该要为IE10预留特殊的代码，除非绝对必要，也就是说，就行为和渲染而言，它应该类似于其他浏览器。²鉴于IE的历史，这听起来有些牵强，但是您期望Firefox或Chrome多少次表现出相同的方式却令人沮丧？

Firefoxbox-sizing多年来不支持无前缀
Firefox历来具有奇怪的轮廓行为，多年来也是如此
Firefox在定位表单元时拒绝合理行为，将未定义行为作为借口，而其他浏览器似乎可以应对
Safari和Chrome有很多的麻烦与一定的 CSS 选择器，有时修复了真正带你回到过去的好醇” IE5，IE6和IE7的天
一般而言，Chrome似乎在重涂部门遇到很多麻烦，例如，更新媒体样式后无法正确重排版面；看来，只有通过强制重涂才能再次解决IE5 / 6/7级别的问题，才能解决Chrome的一半错误
已知有一些WebKit完全是对某些功能的支持，这意味着它们实际上击败了所有功能的特征检测机制

如果您确实有理由要针对特定的浏览器，则一定要使用提供给您的其他工具来将它们嗅出。我只是说，今天要找到这样一个理由比现在要困难得多，这实际上不是您可以依靠的东西。

¹ _{不仅IE10，而且IE9甚至是处理大多数成熟CSS2.1标准的IE8都比Chrome更好，这仅仅是因为IE8如此专注于标准合规性（当时CSS2.1已经相当稳定，只有很小的差异）根据今天的建议），而Chrome似乎只是半精打磨的尖端伪标准技术演示而已。}

² _{我这样说时可能会有偏见，但可以肯定的是。如果您的代码可以在其他浏览器上运行，但不能在IE上运行，则与3年前使用IE的早期版本相比，使用您自己的代码而不是IE10的可能性要大得多。同样，我可能有偏见，但老实说：你不是吗？只要看看您的评论。}

IE标准支持文档是一个不错的起点。

这是在JavaScript中定位IE10的方法：

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

这是在CSS中定位IE10的方法：

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

如果需要通过CSS过滤或重置IE11，请参见另一个问题：
如何为IE 11编写CSS hack？

此处发布的两种解决方案（稍作修改）都可以工作：

<!--[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页的head标记内。然后在css文件中，指定以“ ie10”类作为父类的样式：

.ie10 .myclass1 { }

和瞧！-其他浏览器保持不变。而且您不需要jQuery。您可以在此处查看示例如何实现的示例：http : //kardash.net。

我编写了一个名为Layout Engine的小型香草JavaScript插件，该插件可让您以一种无法伪造的简单方式来检测IE 10（以及其他所有浏览器），这与用户代理嗅探不同。

它将呈现引擎名称作为类添加到html标记上，并返回包含供应商和版本的JavaScript对象（如果适用）

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

我使用此脚本-这是过时的，但是对于定向单独的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中检查用户代理字符串：

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

正如其他人所提到的，我总是建议您使用特征检测。

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

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

CSS属性

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

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

测试页

我将CodePen上所有属性的测试页放在一起。

clipBoardData是仅在IE中可用的函数，因此，如果您要定位所有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*/
}

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

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

仅当> IE9时为真

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

使用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/g，/Trident/x.0/g在哪里x = 4, 5, 6或7（或8将来）更改。

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

您需要做的就是将其添加到某个位置，然后您始终可以通过简单的条件进行检查。isIE如果不是IE，则全局变量将是未定义的，否则它将是版本号。因此，您可以轻松添加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;
}());

对我来说，以下代码可以正常工作，所有条件注释都可以在所有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 */
}

使用babel或打字稿转换此代码js

const browser = () => {
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3576.0 Safari/537.36"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.17 Safari/537.36"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0"
    // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko"
    // "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    const _userAgent = navigator.userAgent;
    const br = {
        "Chrome": "Chrome",
        "Edge": "Edge",
        "Firefox": "Firefox",
        ".NET CLR": "Internet Explorer 11",
    };
    const nobr = {
        "MSIE 10.0": "Internet Explorer 10",
        "MSIE 9.0": "Internet Explorer 9",
        "MSIE 8.0": "Internet Explorer 8",
        "MSIE 7.0": "Internet Explorer 7"
    };
    let thisBrow = "Unknown";
    for (const keys in br) {
        if (br.hasOwnProperty(keys)) {
            if (_userAgent.includes(keys)) {

                thisBrow = br[keys];

                for (const key in nobr) {
                    if (_userAgent.includes(key)) {
                        thisBrow = nobr[key];
                    }
                }

            }
        }
    }

    return thisBrow;
};

这个答案使我有90％的解决方法。我在这里的Microsoft网站上找到了答案的其余部分。

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

使用jQuery（在1.9+版本中不推荐使用.browser以便于用户代理，请参见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-n

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

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

资源

CSS的现代解决方案

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

本文地址：http://javascript.askforanswer.com/zaimouxieqingkuangxialirutedingyuinternet-explorerdecsshuotedingyuinternet-explorerdejavascrip.html
文章标签：conditional-comments , css , html , internet-explorer-10 , javascript
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

CSS属性

测试页

文件下载