对于某些情况，如 Internet Explorer 特定的 CSS 或 Internet Explorer 特定的 JavaScript 代码，如何仅针对 Internet Explorer 10？答案

【问题标题】：How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?对于某些情况，如 Internet Explorer 特定的 CSS 或 Internet Explorer 特定的 JavaScript 代码，如何仅针对 Internet Explorer 10？
【发布时间】：2012-04-11 14:53:14
【问题描述】：

对于某些情况，如 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 忽略条件 cmets 并使用 <html lang="en" class="no-js"> 而不是 <html class="no-js ie10" lang="en">。

【问题讨论】：

我认为更好的问题是：如何让这个 CSS 在两个浏览器上看起来一样？
IE10 PP4 仍然支持@cc_on statement。因此，要检测是否支持 IE10，可以使用以下代码：<script>if(/*@cc_on!@*/false){document.documentElement.className+=' ie10';}</script>。 （我把这个作为评论发了，因为IE还在开发中，所以不知道最终版本是否也支持这个功能）
@RobW - 一旦 ie11 出来，您的示例代码就会出错。改进版：<script>if(Function('/*@cc_on return document.documentMode===10@*/')()){document.documentElement.className+=' ie10';}</script> 改进：不需要条件 cmets；即使评论剥离压缩/处理也有效；没有为 ie11 添加类；将与在 ie10 兼容模式下运行的 ie11 一起工作；不需要独立的脚本标签（可以添加到头部的其他 javascript 中）。
上述代码示例 sn-p:jsbin.com/upofoq/2
更通用的解决方案是：if(document.documentMode) document.documentElement.className+=' ie'+document.documentMode+'mode'; - 它解决了 90% 的问题（有时兼容模式会失败，在这种情况下，您需要在此基础上再进行其他级别的修复）。

标签： javascript html css internet-explorer-10 conditional-comments

【解决方案1】：

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

来源：

【讨论】：

那真是太好了。但是，在针对 IE 中的浏览器模式测试各种文档模式时，我们应该如何关注呢？在什么情况下，我们可以期望在线用户使用与其当前浏览器模式不同的文档模式？
人们通常不会更改文档模式。他们可以，但我没有遇到任何需要用户更改文档模式的网站。如果您使用的是正确的 DOCTYPE，这根本不是问题。
你是我的英雄！请注意，这也修复了 IE11 中的一些问题
这也会影响 IE11 - 因此，如果您正在寻找仅针对 IE9/10 的解决方案，这将无法正常工作:-(
“他们都通过navigator.userAgent检测浏览器”是什么意思？条件编译是 JScript 运行时的内置特性，不能通过用户代理字符串进行欺骗。

【解决方案2】：

我在this 网站上找到了一个解决方案，其中有人有一个有价值的comment：

解决办法是：

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

它

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

【讨论】：

@dave1010 用户代理很容易被欺骗。条件cmets只支持JScript引擎，只有IE4+（含10）才有。
@dave1010 编写一个可以执行您所描述的工作的解析器是困难的，也是极不可能的。任何故意创建和安装此类扩展的人很可能打算“表现得像” IE（也许是为了在非 Windows 环境中进行自动化测试？）。浏览器永远无法保证 100% 的信任，但您可以足够接近。条件 cmets 是检测 JScript 引擎的一种高度可靠的方法，它恰好被 IE 使用。
我能看到的唯一缺点是它需要js，没有条件
这应该是最佳答案，对于 IE10 用户来说，JS 要求应该没有实际意义——如果 JS 被禁用，它可能只是 NoScript 插件。我认为我们需要更多关于 NoScript 纯粹愚蠢的公共教育（而不是像 AdBlock 或 Ghostery 这样的理智插件）。
我建议使用作者提供的替代代码：if (/*@cc_on!@*/false && document.documentMode === 10) {}，它可以绕过 linting 程序中的 eval 警告。

【解决方案3】：

也许你可以试试这样的 jQuery：

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

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

对我来说效果很好。但肯定不能替代条件 cmets！

【讨论】：

我不确定你们，但我需要使用 == '10.0' 才能工作
警告：jQuery.browser 在没有插件的当前版本的 jQuery (1.9) 中不再可用。 blog.jquery.com/2013/01/15/…
我会推荐：if (jQuery.browser.msie && jQuery.browser.version < 10) { // do what you will here } 注意 verion 以检测旧版本的 IE。 IE10 及以上版本适用于我所有的 CSS3、HTML5、jquery 等。
@dan 因为条件 cmets 在所有少于 10 个的 IE 浏览器中都可以使用，而不是让所有浏览器的 JS 混乱。只需说

【解决方案4】：

Internet Explorer 10 does not attempt to read conditional comments anymore. 这意味着它将像任何其他浏览器一样处理条件 cmets：作为常规 HTML cmets，意味着完全忽略。以问题中给出的标记为例，包括 IE10 在内的所有浏览器都将完全忽略注释部分，以灰色突出显示。 HTML5 标准没有提到条件注释语法，这正是他们选择在 IE10 中停止支持它的原因。

但是请注意，仍然支持 JScript 中的 conditional compilation，如 cmets 和更新的答案所示。它也不会在最终版本中消失，unlike jQuery.browser。当然，毫无疑问，用户代理嗅探仍然像以往一样脆弱，在任何情况下都不应该使用。

如果您确实必须以 IE10 为目标，请使用可能在不久的将来仍会支持的条件编译，或者 - 如果您能提供帮助 - 使用诸如 Modernizr 之类的功能检测库来代替（或结合使用）浏览器检测。除非您的用例需要 noscript 或在服务器端容纳 IE10，否则用户代理嗅探将比可行的选项更令人头疼。

听起来很麻烦，但请记住，作为高度符合当今 Web 标准的现代浏览器¹，假设您编写了高度符合标准的可互操作代码，您应该除非绝对必要，否则必须为 IE10 留出特殊代码，即它应该在行为和呈现方面类似于其他浏览器。² 考虑到 IE 的历史，这听起来有些牵强，但是您有多少次期望 Firefox 或 Chrome 会以同样的方式运行，结果却令人沮丧？

Firefox did not support box-sizing unprefixed for years
Firefox has historically had weird outline behavior，多年来也是如此
Firefox refuses to behave reasonably when it comes to positioned table-cells，以未定义的行为为借口，而其他浏览器似乎可以应付得很好
Safari 和 Chrome 有 lots of trouble with certain CSS selectors，有时会修复 really take you back to the good ol' days of IE5, IE6 and IE7
Chrome 似乎在重绘部门总体上存在很多问题，例如在更新媒体样式时无法正确重排布局；似乎 Chrome 的一半错误可以简单地解决，并且只能通过强制重新绘制，再次是 IE5/6/7 级别的东西
众所周知，一些 WebKit 品种在支持某些功能方面完全撒谎，这意味着它们实际上击败了功能检测机制，在所有事情中

如果您确实有正当理由针对某些浏览器，请务必使用提供给您的其他工具来嗅探它们。我只是说今天你会比以前更难找到这样的理由，而且这真的不是你可以依赖的东西。

¹_{不仅是 IE10，还有 IE9，甚至 IE8 处理大部分成熟的 CSS2.1 标准都比 Chrome 好得多，仅仅是因为 IE8 如此专注于标准合规性（在那个时候 CSS2.1 已经相当稳定了，与今天的推荐只有细微的差别），而 Chrome 似乎只是尖端伪标准的半抛光技术演示。}

²_{当我这样说的时候，我可能会有偏见，但确实如此。如果您的代码可以在其他浏览器中运行但不能在 IE 中运行，那么 it's an issue with your own code 而不是 IE10 的几率比 3 年前使用以前版本的 IE 时要好得多。再说一次，我可能有偏见，但说实话：aren't you too? 看看你的 cmets。}

【讨论】：

Chhhh，是的，IE10 仍然远远落后于 webkit 和 gecko。我有一些 CSS 在 webkit 中看起来很好，在 IE10 中看起来很糟糕。如果我找不到有选择地应用样式的方法，那么我将不得不放弃这些样式。 :(
值得指出的是，IE10 中删除了条件 cmets，因为它现在具有 HTML5 解析器。根据 HTML5 解析算法，条件 cmets 无效。查看blogs.msdn.com/b/ie/archive/2011/07/06/…的遗留功能部分
@trusktr 如果你的代码很好，那么它在所有最新的浏览器中都会很好看。
@KlevisMiho 不正确，Chrome 和 Firefox 支持 IE 不具备的功能，即使编码良好。如果您的意思是“仅使用常见功能”，那么这与“代码好”并不完全相同。
@Dan Mantyla：在这种情况下，stuff you don't want IE9 and below to see

【解决方案5】：

IE Standards Support Documentation 是一个很好的起点。

以下是在 JavaScript 中定位 IE10 的方法：

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

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

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

如果需要通过 CSS 过滤或重置 IE11，请参阅另一个题： How to write a CSS hack for IE 11?

【讨论】：

你的 CSS 解决方案也会影响 IE11 :\

【解决方案6】：

此处发布的两种解决方案（稍作修改）均有效：

<!--[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。

【讨论】：

【解决方案7】：

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

它将渲染引擎名称作为一个类添加到 html 标记上，并返回一个 JavaScript 对象，其中包含供应商和版本（在适当的情况下）

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

【讨论】：

【解决方案8】：

我使用此脚本 - 它已过时，但在定位单独 Internet Explorer 10 样式表或包含仅当浏览器是 Internet Explorer 10 的 JavaScript 文件时有效，就像使用条件 cmets 一样。不需要 jQuery 或其他插件。

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

【讨论】：

酷。你能补充一点关于这些@statements 是什么的信息吗？

【解决方案9】：

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

喜欢：

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

【讨论】：

因为 stripos 不区分大小写，所以将字符串置于高位是没有意义的 ;)
我总是很想这样做，但请记住，当前端有 cdn/cache/proxy 时它会中断。

【解决方案10】：

如果必须这样做，可以检查 JavaScript 中的用户代理字符串：

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

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

【讨论】：

什么是``!!` ？
String.match() 将返回一个匹配的数组，否则返回 null。 !(String.match()) 使其在匹配时返回 false 或在不匹配时返回 true。 !(!(String.match())) 使其返回 true 表示匹配或 false 表示不匹配。 !(!(something)) 或只是 !!something 因此将任何内容转换为布尔值 true/false。 stackoverflow.com/questions/784929/…
@FranciscoCorralesMorales 哦，当我的代码受到审查时，我被问了多少次。 :) 作为 dave1010 伟大评论的扩展，它可用于将“真实”或“虚假”值强制转换为内在 boolean 值，例如var name = 'me', hasName = !!name;.

【解决方案11】：

如果您想使用 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

测试页面

我已将 test page 与 CodePen 上的所有属性放在一起。

【讨论】：

【解决方案12】：

适用于 IE10+ 和 IE9 的 CSS

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

@media screen\0 {
    /* IE8,9,10 styles*/
}

【讨论】：

【解决方案13】：

clipBoardData 是一个仅在 IE 中可用的函数，因此如果您正在寻求针对所有可以使用的 IE 版本

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

【讨论】：

-1：但是版本呢？你怎么知道是哪个版本？
Edge浏览器也没有“window.clipboardData”
@AFD 这个问题是关于 IE，而不是 Edge。

【解决方案14】：

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

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

仅当 > IE9 时为真

【讨论】：

【解决方案15】：

Conditionizr (see docs) 会将浏览器 CSS 类添加到您的 html 元素，包括 ie10。

【讨论】：

【解决方案16】：

使用 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）。

【讨论】：

【解决方案17】：

我只是想添加我的 IE 检测版本。它基于在http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/ 找到的 sn-p，并且扩展为还支持 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;
}());

【讨论】：

【解决方案18】：

对我来说，以下代码可以正常工作，所有条件 cmets 在所有 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更新有关...

【讨论】：

(gt IE 11) 位完全没有必要。你也可以改用。
BoltClock 如果 (gt IE 11) 被忽略，并且用户的浏览器是 IE 12（当它出现时）将没有定义 html 元素。

【解决方案19】：

这是我为 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{
    .......
}

【讨论】：

【解决方案20】：

查看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 */
}

【讨论】：

【解决方案21】：

使用 babel 或 typescript 转换此代码 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;
};

【讨论】：

嗨 Aliaksandr，感谢您的想法！不知道为什么有人投了反对票，但我投了赞成票，因为答案至少是一个有用的提示。无论谁投反对票，为什么不向新用户提供有用的建议？

【解决方案22】：

这个答案让我成功了 90%。我在Microsoft site here 上找到了我的其余答案。

下面的代码是我用来定位所有 ie 的，即通过将 .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");
  }
});

【讨论】：

“在 1.9+ 中弃用了 .browser 以支持用户代理” 它没有说“支持用户代理”——不管是什么意思——它说支持 特征检测.

【解决方案23】：

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

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

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

【讨论】：

我没有 -1 你的答案，但链接似乎有点过时-八-ed。还值得注意的是，OP 仅针对 IE10 和 IE10。无论如何，您的代码 sn-p 不适用于 IE10 及更高版本或任何其他非 IE 浏览器，因为条件 cmets 仅在 IE5 到 IE9 中受支持。

【解决方案24】：

如果确实需要，可以通过将以下行添加到 <head> 来使条件 cmets 工作：

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

Source

【讨论】：

【解决方案25】：

css 的现代解决方案

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

【讨论】：