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

Question

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

<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

在没有条件 cmets 和没有用户代理嗅探的情况下检测这一点的真正方法是使用条件编译：

<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
}

参考：How can I detect IE10 from JS when browser mode is IE9?

更新：

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

查看为此目的构建的Conditionizr，您可以添加环境检测并返回一个对象供您管理测试，这里是IE10 检测。请注意，我们也是 UA 嗅探以忽略 IE10 的移动版本，我们将适当地忽略它，因为我们会以不同的方式定位 Mobile 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]);

Answer 3

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

正如 Archer 指出的，你不妨检测到这个服务器端并向客户端发送不同的 css。

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

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

而不是这个：

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