如果用戶使用的是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]);