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">.

4

25 回答 25

132

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

资料来源:

于 2013-02-16T23:48:09.790 回答
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 来测试
于 2012-12-20T12:13:40.840 回答
65

Perhaps you can try some jQuery like this:

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

To use this method you must include the jQuery Migrate library because this function was removed from the main jQuery library.

Worked out quite fine for me. But surely no replacement for conditional comments!

于 2012-12-19T14:39:27.670 回答
63

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

但是请注意,仍然支持 JScript 中的条件编译,如评论和更新的答案所示。jQuery.browser. _ 当然,毫无疑问,用户代理嗅探仍然像以往一样脆弱,在任何情况下都不应该使用。

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

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

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


1 不仅是 IE10,IE9,甚至 IE8 对大多数成熟的 CSS2.1 标准的处理都比 Chrome 好得多,仅仅是因为 IE8 非常注重标准合规性(当时 CSS2.1 已经相当稳定,只有很小的差异根据今天的推荐),而 Chrome 似乎只是尖端伪标准的半抛光技术演示。

2 我说这话时可能有偏见,但确实如此。如果您的代码可以在其他浏览器中运行,但不能在 IE 中运行,那么与 3 年前使用以前版本的 IE 相比,您自己的代码而不是 IE10 出现问题的可能性要好得多。再说一次,我可能有偏见,但说实话:你不是吗?只看你的评论。

于 2012-03-28T02:24:04.747 回答
36

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

以下是在 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?

于 2013-06-14T01:57:38.480 回答
11

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

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

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

于 2013-02-02T03:11:30.863 回答
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

于 2012-12-30T00:47:59.540 回答
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 >
于 2013-01-19T22:53:06.510 回答
6

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

喜欢:

if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) {
    <link rel="stylesheet" type="text/css" href="../ie10.css" />
}
于 2013-03-20T13:21:18.513 回答
5

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

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

正如其他人所提到的,我总是推荐特征检测。

于 2013-01-18T11:08:21.950 回答
4

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

测试页面

我已经在 CodePen 上整理了一个包含所有属性的测试页面。

于 2013-02-18T23:37:45.327 回答
4

IE10+ 和 IE9 的 CSS

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

@media screen\0 {
    /* IE8,9,10 styles*/
}
于 2015-10-21T01:17:47.953 回答
3

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

<script type="text/javascript">
if (window.clipboardData)
            alert("You are using IE!");
</script>
于 2013-07-12T10:33:43.153 回答
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/gx = 4, 5, 67或可能8为未来)。

于 2014-03-20T18:38:02.580 回答
1

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

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

仅当 > IE9 时为真

于 2013-04-16T18:31:55.747 回答
1

Conditionizr (请参阅文档)会将浏览器 CSS 类添加到您的 html 元素,包括 ie10。

于 2013-07-12T11:45:21.770 回答
1

我只是想添加我的 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;
}());
于 2014-06-12T08:53:03.120 回答
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{
    .......
}
于 2014-05-22T02:12:20.567 回答
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更新有关...

于 2014-04-27T22:56:03.753 回答
0

查看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 */
}
于 2014-03-18T10:54:12.523 回答
0

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

于 2018-12-20T15:04:10.490 回答
-2

这个答案让我成功了 90%。我在此处的 Microsoft 网站上找到了我的其余答案。

下面的代码是我用来定位所有 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");
  }
});
于 2013-08-29T12:52:44.047 回答
-2

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

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

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

于 2014-06-25T17:53:54.133 回答
-2

如果确实需要,可以通过将以下行添加到<head>

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

资源

于 2014-07-27T22:20:35.057 回答
-4

CSS的现代解决方案

html[data-useragent*='MSIE 10.0'] .any {
  your-style: here;
}
于 2014-05-23T10:36:31.493 回答