使用附加到html标记的IE10类来定位IE10

Question

我在我们的网站上实现的Extjs元素有一些问题，需要执行一些特定于IE10的样式来解决这些问题。我知道IE10不再支持旧的IE风格的注释，你可以根据IE的版本有条件地指定一个不同的html标签，附加一个不同的类。因此，在这种情况下，我将不得不使用jQuery来附加一个IE10类的HTML标签，这不是最好的解决方案，但因为我们的用户无论如何都需要启用Javascript，这是我们目前的最佳选择。

我目前正在使用以下代码段来尝试实现这一点：

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <script type="text/javascript">
      if ($.browser.msie && $.browser.version == 10) {
         $("html").addClass("ie10");
    }
    </script>

但是，如果我查看开发人员模式/在IE10中查看页面的源代码，则不会将任何内容附加到HTML标记。然后我使用Firebug (因为IE开发人员工具很糟糕)来检查我正在使用的脚本是否有任何问题，我的控制台中有以下消息：

  TypeError: $.browser is undefined
     [Break On This Error]  

      if ($.browser.msie && $.browser.version == 10) {

由于我很少使用Javascript进行浏览器检测，所以我承认我从web上借用了这个脚本，所有的评论都表明它是有效的，但正如您清楚地看到的那样，它并不有效。

有没有人知道如何调整它，使其能够工作，或者确实有任何替代方案，我可以使用我的CSS专门针对IE10？

Answer 1

您可以使用条件编译来仅获取IE10，这是一个很好的方法，因为它不依赖于jQuery或任何可能被欺骗的东西(Afaik)。

在IE8、IE9、IE10、Chrome上进行了测试，总体运行情况与预期一致。

用法：

if(Function('/*@cc_on return document.documentMode===10@*/')()){ $("html").addClass("ie10"); }

继续阅读：https://stackoverflow.com/a/13971998/1711038

Answer 2

从jQuery v1.3开始，jQuery的$.browser函数就被弃用了。

对您来说更重要的是，在1.9版本中，jQuery删除了许多旧的不推荐使用的功能，包括这个。这就是它对你不起作用的原因。

如果您必须使用旧的不推荐使用的功能，jQuery开发人员确实提供了一个单独的迁移库，可以恢复所有旧功能。但它实际上只是作为一种短期权宜之计；推荐的解决方案是修复代码，使其不使用旧功能。

jQuery不推荐使用$.browser的原因是浏览器检测被认为是一种糟糕的做法。实际上，在您想要这样做的每一种情况下，都有一种更好的、更符合标准的方法来解决问题，而且浏览器越新，出现这种情况的可能性就越大--可以说有充分的理由仍然对IE6和类似的浏览器使用浏览器检测，但是IE10是一个相当不错的浏览器，如果您确实遇到了一个无法克服的问题，我会感到惊讶。

有几种方法可以检测IE10 (我注意到您已经接受了一个答案)，但老实说，我建议您最好找出样式问题的根本原因，并修复它，因为否则当IE11发布时，您将再次进行这项工作。

Answer 3

既然你正在使用ExtJS，为什么不用它来解决这个问题呢？

ExtJS 3.4.0不识别ie10，但有一个覆盖可用：https://market.sencha.com/extensions/ext-isie10-for-extjs-3-x

然后，您可以使用：

if (Ext.isIE10){
    Ext.fly(document.body.parentNode).addClass('ie10');
}

工作代码：

Ext.onReady(function () {
    // override v3.4.0 ie10 = ie6 bug
    // https://market.sencha.com/extensions/ext-isie10-for-extjs-3-x
    (function() {

        var ua = navigator.userAgent.toLowerCase();
        check = function(r) {
            return r.test(ua);
        },
            isIE10 = Ext.isIE && check(/msie 10/),
            isIE6 = Ext.isIE && !Ext.isIE7 && !Ext.isIE8 && !Ext.isIE9 && !isIE10;

        /**
         * True if the detected browser is Internet Explorer 6.x.
         * @type Boolean
         */
        Ext.isIE6 = isIE6;

        /**
         * True if the detected browser is Internet Explorer 10.x.
         * @type Boolean
         */
        Ext.isIE10 = isIE10;

    })();

    if (Ext.isIE10){
        Ext.fly(document.body.parentNode).addClass('ie10');
    }

});