在某些情况下，例如特定于Internet Explorer的CSS或特定于Internet Explorer的JavaScript代码，如何仅将Internet Explorer 10定位？

160

在某些情况下，例如特定于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">。

javascript  html  css  internet-explorer-10  conditional-comments 
— trusktr
source
8
我认为一个更好的问题是：如何使这两个浏览器上的CSS看起来相同？
— BentOnCoding
12
IE10 PP4仍支持该@cc_on声明。因此，检测是否IE10支持或没有，你可以使用下面的代码：<!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className+=' ie10';}</script><!--<![endif]-->。（我将其作为评论发表，因为IE仍在开发中，所以尚不清楚最终版本是否也支持此功能）
— Rob W
15
@RobW-ie11退出后，您的示例代码将是错误的。改进的版本：<script>if(Function('/*@cc_on return document.documentMode===10@*/')()){document.documentElement.className+=' ie10';}</script>改进：不需要条件注释；即使注释条压缩/处理也有效；没有为ie11添加任何类；将与在ie10兼容模式下运行的ie11一起使用；不需要独立的脚本标签（可以直接添加到其他javascript脚本中）。
— robocat
2
以上代码段的示例：jsbin.com/upofoq/2
— robocat 2012年
8
更为通用的解决方案是：if(document.documentMode) document.documentElement.className+=' ie'+document.documentMode+'mode';-解决了90％的问题（有时兼容模式会失败，在这种情况下，您需要在此之上进行另一级别的修复）。
— robocat

Answers:

65

也许您可以尝试这样的jQuery：

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

要使用此方法，您必须包括jQuery Migrate库，因为此功能已从主jQuery库中删除。

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

— 马克斯·索尔特
source
3
我不确定你们，但我需要使用== '10.0'它才能正常工作
— lulalala 2013年
112
警告：jQuery.browser在没有插件的当前版本的jQuery（1.9）中不再可用。blog.jquery.com/2013/01/15/...
— dave1010
2
我建议： if (jQuery.browser.msie && jQuery.browser.version < 10) { // do what you will here }注意Verion <10，以检测IE的较早版本。IE10及更高版本可以与我的所有CSS3，HTML5，jquery等完美配合
— Dan Mantyla 2013年
1
@dan，因为条件注释可在少于10个的所有IE浏览器中使用，而不是使所有浏览器的JS混乱。只需说<！-[如果是IE 9]，您就可以定位所有低于10的IE版本。不需要JS。
— edhurtig
1
@Marc-AndréLafortune提出了一个很好的观点。根据经验，应该始终使用===运算符而不是==。在编写JavaScript时，您需要注意这一点。stackoverflow.com/questions/359494/…–
— 斯图尔特
132

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

资料来源：

— 罗尼
source
真的很好 但是，当针对IE中的浏览器模式测试各种文档模式时，我们应该如何关注？在什么情况下，我们可以期望在线用户使用与当前浏览器模式不同的文档模式？
— klewis 2013年
人们通常不会更改文档模式。他们可以，但是我没有遇到任何需要用户更改文档模式的站点。如果您使用的是正确的DOCTYPE，则根本不是问题。
— 罗尼
3
你是我的英雄！请注意，这也修复了IE11中混乱的问题
— locrizak 2013年
8
这也会影响IE11-因此，如果您正在寻找仅针对IE9 / 10的解决方案，则此方法将无效：-(
— Lukasz Lenart 2014年
1
“所有人都通过来检测浏览器navigator.userAgent”是什么意思？条件编译是JScript运行时的内置功能，不能通过用户代理字符串进行欺骗。
— BoltClock
111

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

解决方案是：

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

它

  • 不需要条件注释；
  • 即使注释条压缩/处理也有效；
  • 在Internet Explorer 11中没有添加ie10类；
  • 与以Internet Explorer 10兼容模式运行的Internet Explorer 11更有可能按预期工作；
  • 不需要独立的脚本标记（可以将其添加到头部的其他JavaScript代码中）。
  • 不需要jQuery进行测试
— 威廉·德·威特
source
3
@ dave1010用户代理很容易被欺骗。条件注释仅受JScript引擎支持，JScript引擎仅在IE4 +（包括10）中可用。
— 罗布W
2
@ dave1010编写一个可以执行您所描述的工作的解析器非常困难，而且极不可能。故意创建并安装此类扩展程序的任何人都极有可能打算像IE一样（可能是在非Windows环境中进行自动化测试的目的？）。绝对不能在浏览器中保证100％的信任，但是您可以获得足够的信任。条件注释是检测IE恰好使用的JScript引擎的高度可靠的方法。
— 罗布W
3
唯一的缺点我能看到的是，它要求JS，其条件句didnt
— 詹姆斯梅龙镇
4
这应该是最好的答案，并且对IE10用户来说，对JS的要求应该是没有意义的-如果禁用了JS，则可能只是NoScript插件。我认为我们需要对NoScript的绝对愚蠢性进行更多的公开教育（与诸如AdBlock或Ghostery这样的理智的插件相对）。
— iono
8
我建议使用作者提供的替代代码：if (/*@cc_on!@*/false && document.documentMode === 10) {}避免掉毛程序中的评估警告。
— ajbeaven
62

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

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

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

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

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

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

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

— BoltClock
source
20
嗯，是的，IE10仍然远远落后于webkit和gecko。我有一些CSS在webkit中看起来很好，而在IE10中则很丑。如果我找不到选择性地应用样式的方法，那么我将不得不放弃这些样式。:(
— trusktr 2012年
2
值得指出的是，条件注释已在IE10中删除，因为它现在具有HTML5解析器。根据HTML5解析算法，条件注释无效。请参阅blogs.msdn.com/b/ie/archive/2011/07/06/…的
— David Storey
3
@trusktr，如果您编写的很好，则在所有最新的浏览器中看起来都不错。
— Klevis Miho 2013年
10
@KlevisMiho并非如此，即使编码正确，Chrome和Firefox也支持IE所没有的功能。如果您的意思是“仅使用通用功能”，则与“良好编码”并不完全相同。
— trusktr
5
@丹·曼蒂拉：在这种情况下，<!--[if !IE]><!-->stuff you don't want IE9 and below to see<!--<![endif]-->
— BoltClock
11

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

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

— 尤金·卡戴斯（Eugene Kardash）
source
11

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

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

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

— 马特·斯托
source
7

我使用此脚本-这是过时的，但是对于定向单独的 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 >
— 德博拉
source
2
凉。您可以添加一些有关这些@statements的信息吗？
— trusktr 2013年
6

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

喜欢：

if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) {
    <link rel="stylesheet" type="text/css" href="../ie10.css" />
}
— 伦尼·布鲁因尼克斯（Lenny Bruyninckx）
source
2
较高的字符串是没有意义的，因为stripos不区分大小写；）
— mgutt
2
我总是试着这么做，但是请记住，当前端有一个cdn / cache / proxy时，它就会中断。
— Johan 2013年
5

如果必须执行此操作，则可以在JavaScript中检查用户代理字符串：

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

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

— dave1010
source
``!!''是干什么的？
— 弗朗西斯科·科拉莱斯·莫拉莱斯
4
String.match()将返回匹配的数组，否则返回null。!(String.match())使其在匹配时返回false或在不匹配时返回true。!(!(String.match()))使匹配返回true或不匹配返回false。!(!(something))或!!something因此将任何内容转换为布尔值true / false。stackoverflow.com/questions/784929/...
— dave1010
@FranciscoCorralesMorales噢，有人问我检查我的代码的次数。:)作为dave1010出色评论的扩展，它可以用于将“真实”或“虚假”值强制为内在boolean值，例如var name = 'me', hasName = !!name;。
— WynandB 2014年
4

如果要使用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
  • 微软Flex
  • msFlexOrder

测试页

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

— 蒂姆·皮特鲁斯基
source
3

IE10 +和IE9的CSS

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

@media screen\0 {
    /* IE8,9,10 styles*/
}
— 纳米级
source
1

使用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将来）更改。

— 终结事件
source
1

我只想添加我的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;
}());
— 一月
source
0

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

— 亚历克斯
source
1
该(gt IE 11)位是完全不必要的。您也可以这样做<!--[if !(IE)]<!-->。
— BoltClock
如果（gt IE 11）被遗漏，并且用户的浏览器是IE 12（出现时），则不会定义任何html元素。
— 莱昂纳多·冈萨雷斯
0

这是我为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{
    .......
}
— 弗朗西斯科·科拉莱斯·莫拉莱斯
source
0

使用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;
};
展开摘要

— Aliaksandr Shpak
source
嗨，Aliaksandr，谢谢你的主意！不知道为什么有人投票了，但是我投票了，因为答案至少是一个有用的提示。谁反对，为什么不帮助新用户提供有用的建议？
— trusktr
-2

这个答案让我有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");
  }
});
— 布丹宁
source
“在1.9+中不推荐使用.browser来支持用户代理。”并不是说“支持用户代理”，无论这意味着什么，它都支持功能检测。
— BoltClock
-2

如果您不介意以IE10及更高版本和非IE浏览器为目标，则可以使用以下条件注释：

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

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

— 用户名
source
1
我没有-1你的答案，但链接似乎有点outd- 8 -ed。还值得注意的是，OP仅打算针对IE10和IE10。无论如何，您的代码段不适用于IE10及更高版本或任何其他非IE浏览器，因为条件注释仅在IE5和IE9中受支持。
— WynandB 2014年
-2

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

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

资源

— nyuszika7h
source
-4

CSS的现代解决方案

html[data-useragent*='MSIE 10.0'] .any {
  your-style: here;
}
— 拉斐尔
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.