javascript - 如果用户使用 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 Explore 中，我只需要更改宽度以使我的 css 看起来正确，我尝试将 JS 置于文档就绪功能中，但这也不起作用。任何人都可以在这里帮助我，告诉我我做错了什么以及下一步应该做什么。

Answer 1

您的问题在于检测浏览器。在 js fiddle 中运行代码，并注意到您总是到达 else block ，即使在 ie 11 中也是如此。

正如 Archer 指出的那样，您不妨检测此服务器端并将不同的 css 发送到客户端。

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

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

代替这个:

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