以IE10为目标，在html标签上添加一个IE10类

Targeting IE10 with an IE10 class appended to the html tag

本文关键字：IE10 一个 添加 标签 目标 html      更新时间：2023-09-26

我在我们网站上实现的Extjs元素有一些问题，需要执行一些IE10特定的样式来解决这些问题。我知道IE10不再支持旧的IE风格的注释，你可以有条件地指定一个不同的html标签，根据IE的版本添加不同的类。所以，在这种情况下，我将不得不使用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进行浏览器检测，我承认我从网上借用了这个脚本，所有的评论都表明它有效，但正如你所看到的，它显然不起作用。

有没有人有任何想法，如何这可以适应，使它的工作或确实有任何替代方案，我可以用我的CSS专门针对IE10 ?

你可以使用条件编译只获得IE10，这是一个好方法，因为它不依赖于jQuery或任何可能被欺骗的东西。

在IE8, IE9, IE10, Chrome上进行了测试，结果均与预期一致。

用法:

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

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

jQuery的$.browser函数自jQuery v1.3以来已弃用。

对您来说更重要的是，在1.9版本中，jQuery删除了许多旧的不赞成的特性，包括这个。这就是它不适合你的原因。

如果您必须使用旧的已弃用的特性，jQuery开发人员确实提供了一个单独的迁移库来恢复所有旧的特性。但这只是一种短期的权宜之计;建议的解决方案是修复代码，使其不使用旧功能。

jQuery弃用$.browser的原因是浏览器检测被认为是糟糕的实践。在几乎所有你想要做的情况下，都有一个更好的、更符合标准的方法来解决问题，而且浏览器越新，就越有可能出现这种情况——有很好的理由仍然在IE6和类似的浏览器中使用浏览器检测，但IE10是一个相当不错的浏览器，如果你真的遇到了一个无法克服的问题，我会感到惊讶。

有几种方法可以检测IE10(我注意到你已经接受了一个答案)，但说实话，我想说你最好找到你所拥有的样式问题的潜在原因，并修复它，因为否则当IE11发布时，你将再次做这整个练习。

当你使用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');
    }
});

如果您只对IE浏览器检测感兴趣，那么我们使用以下方法，这似乎是有效的。您可以通过传递正确的ID来更改要添加的DIV。

    <!--[if IE 10]>
    <script  type="text/javascript">
        $(document).ready(function() {
            $("#ieFix").addClass("ie10");
        });
    </script>
<![endif]-->

Layout Engine使用特征检测来确定浏览器/浏览器版本，并在html标签中添加适当的css类。它可以检测IE11, IE10, IE9, IE8和IE7，以及其他流行的浏览器，包括一些移动浏览器。http://mattstow.com/layout-engine.html

相关文章：