如果用户使用的是Internet Explorer 10或更高版本，请更改CSS类

Question

当用户使用Internet Explorer 10或11时，我试图使用jQuery更改2个ASP控件的css。我需要这样做，因为在IE10之后，他们停止使用条件注释。 现在，我要做的是：

<script>
    $(document).ready(function () {         
        if ($.browser.msie && $.browser.version === 10 || $.browser.msie && $.browser.version === 11) {

            alert('testIf');

            $("#txtUsername").removeAttr('loginInput');
            $("#txtPassword").removeAttr('loginInput');

            $("#txtUsername").css({
                "width": "284px",
                "border": "0px",
                "border-top": "1px solid #646464",
                "border-bottom": "0px #646464 solid",
                "border-left": "solid #646464 4px",
                "height": "33px",
                "background-image": "url(./Images/login-icon.png)",
                "background-repeat": "no-repeat",
                "padding-left": "16px",
                "float": "left",
                "display": "block",
            });

            $("#txtPassword").css({
                "width": "284px",
                "border": "0px",
                "border-top": "1px solid #646464",
                "border-bottom": "0px #646464 solid",
                "border-left": "solid #646464 4px",
                "height": "33px",
                "background-image": "url(./Images/login-icon.png)",
                "background-repeat": "no-repeat",
                "padding-left": "16px",
                "float": "left",
                "display": "block",
            });
        } else {
            alert('testElse');
        }
    });
</script>

我有2个这样的文本框：

        <asp:TextBox CssClass="loginInput loginUsername" TabIndex="1" ID="txtUsername" autocomplete="off" AutoCompleteType="Disabled" runat="server"></asp:TextBox>

        <asp:TextBox CssClass="loginInput loginPassword" TabIndex="2" ID="txtPassword" textmode="Password" runat="server"></asp:TextBox>

这是我的CSS（上面的CSS唯一的变化是宽度）：

.loginInput {
    width: 285px;
    border: 0px;
    border-top: 1px solid #646464;
    border-bottom: 0px #646464 solid;
    border-left: solid #646464 4px;
    height: 33px;
    background-image: url(./Images/login-icon.png);
    background-repeat: no-repeat;
    padding-left: 16px;
    float:left;
    display:block;
}

.loginUsername {
    margin-top: 15px;
    background-position: 271px 9px;
}

.loginPassword {
    background-position: 271px -75px;
}

在Internet Explorer中，我只需要更改宽度即可使css看起来正确，我试图将JS放到文档就绪功能中，但这也不起作用。 谁能在这里帮助我，告诉我我做错了什么，下一步我该怎么做。

Answer 1

在没有条件注释且没有用户代理嗅探的情况下，检测此问题的真正方法是使用条件编译：

<script type="text/javascript">
    var isIE10 = false;
    /*@cc_on
        if (/^10/.test(@_jscript_version)) {
            isIE10 = true;
        }
    @*/
    console.log(isIE10);
</script>

运行此代码后，之后可以随时使用以下命令：

if (isIE10) {
    // Using Internet Explorer 10
}

参考： 当浏览器模式为IE9时，如何从JS中检测IE10？

更新：

function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}

例：

if (isIE () == 8) {
 // IE8 code
} else {
 // Other versions IE or not IE
}

要么

if (isIE () < 9) {
 // is IE version less than 9
} else {
 // is IE 9 and later or not IE
}

要么

if (isIE()) {
 // is IE
} else {
 // Other browser
}

Answer 2

您的问题在于检测浏览器。 在js小提琴中运行代码，请注意，即使在ie 11中，您也始终到达else块。

正如Archer指出的那样，您最好还检测到此服务器端并将不同的CSS发送给客户端。

除此之外，为什么要这样做：

 $.browser.msie && $.browser.version === 10 || $.browser.msie && $.browser.version === 11

代替这个：

$.browser.msie && $.browser.version > 9 

Answer 3

查看为此目的而构建的Conditionizr ，您可以添加环境检测程序，并且它返回一个Object供您管理测试，这就是IE10检测器。 请注意，我们也是UA嗅探忽略IE10的移动版本，我们会适当地忽略它，因为我们针对移动IE的目标是不同的，因为两者并不相同。 IE11检测。

conditionizr.add('ie10', [], function () {
  var version = false;
  /*@cc_on
    if (/^10/.test(@_jscript_version) && /MSIE 10\.0(?!.*IEMobile)/i.test(navigator.userAgent))
    version = true
  @*/
  return version;
});

然后，您就可以像这样使用它来添加一个class （请注意['class']）：

conditionizr.add('ie10', ['class'], function () {
  var version = false;
  /*@cc_on
    if (/^10/.test(@_jscript_version) && /MSIE 10\.0(?!.*IEMobile)/i.test(navigator.userAgent))
    version = true
  @*/
  return version;
});

这也为内联JavaScript开发提供了完整的对象访问权限：

if (conditionizr.ie10) {
  // IE10...
}

您还可以运行回调：

conditionizr.on('ie10'[, callback]);