Question

我知道这是一个老问题。我想为不同的浏览器添加浏览器特定的类，主要用于IE版本。

我使用了下面提到的代码：

<!--[if IE 7 ]>    <html dir="ltr" lang="en-US" class="ie ie7 lte8 lte9"> <![endif]-->
<!--[if IE 8 ]>    <html dir="ltr" lang="en-US" class="ie ie8 lte8 lte9"> <![endif]-->
<!--[if IE 9 ]>    <html dir="ltr" lang="en-US" class="ie ie9 lte9"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html dir="ltr" lang="en-US" class="not-ie"><!--<![endif]-->

现在问题是条件注释从ie + +开始，我想要所有ie版本的特定类。如果我也为webkit和moz浏览器上课，那就更好了。

此目的是从我现有的样式表中删除所有css hacks。

我想要的东西应该像这样工作，JScript解决方案也是可以接受的。

<!--[if IE 7 ]>    <html dir="ltr" lang="en-US" class="ie ie7 lte8 lte9"> <![endif]-->
<!--[if IE 8 ]>    <html dir="ltr" lang="en-US" class="ie ie8 lte8 lte9"> <![endif]-->
<!--[if IE 9 ]>    <html dir="ltr" lang="en-US" class="ie ie9 lte9"> <![endif]-->
<!--[if IE 10 ]>    <html dir="ltr" lang="en-US" class="ie ie10"> <![endif]--> <!--no more work for 1e10+ -->
<!--[if IE 11 ]>    <html dir="ltr" lang="en-US" class="ie ie11"> <![endif]--> <!--no more work for 1e10+ -->
<!--[if !IE]><!--><html dir="ltr" lang="en-US" class="not-ie"><!--<![endif]-->

Answer 1

使用以下JavaScript代码，它将在HTML标记中添加IE版本类：

<强>来源：

(function () {
    var v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i'),
        browser,
        isIE;

    while ( div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', all[0]);
    v = v > 4 ? v : document.documentMode;
    if (v) {
        browser = " ie"
        for(var i = 5; i<12; i++){
            if(v < i) {
                browser += ' lte-ie' + i;
            }else if (v > i) {
                browser += ' gte-ie' + i;
            }else if (v == i) {
                browser += ' ie' + i;
            }
        }

        isIE = {
            "version" : v
        }

    } else {
        browser = ' not-ie';
        isIE = false;
    }
    document.documentElement.className += browser;
    window.ie = isIE;
}());

<强>缩小的：

(function(){for(var a=3,b=document.createElement("div"),c=b.getElementsByTagName("i");b.innerHTML="\x3c!--[if gt IE "+ ++a+"]><i></i><![endif]--\x3e",c[0];);if(a=4<a?a:document.documentMode){b=" ie";for(c=5;12>c;c++)a<c?b+=" lte-ie"+c:a>c?b+=" gte-ie"+c:a==c&&(b+=" ie"+c);a={version:a}}else b=" not-ie",a=!1;document.documentElement.className+=b;window.ie=a})();

<强>注释：

由于脚本支持IE5及更高版本，我保留所有版本检测。它可能对您没有用，但其他人可以发现它有用。有额外的CSS类没有坏处。

Answer 2

在javascript中，您可以使用navigator.userAgent变量并检查它是否与IE用户代理（MSIE **或Trident / **）匹配

警告：Trident是检查IE的新方式：

var newIEReg = new RegExp("Trident\/([0-9]+)\.0")
var oldIEReg = new RegExp("MSIE ([0-9]+)\.[0-5]+")
var ieVersion = -1;
if(navigator.userAgent.match(newIEReg))
{
   ieVersion = parseInt(newIEReg.$1) + 4;
}
else if(navigator.userAgent.match(oldIEReg))
{
   ieVersion = parseInt(oldIEReg.$1);
}

Answer 3

每个浏览器都有一个用户代理，因此您可以使用以下内容：

var user_agent = navigator.userAgent;
if(user_agent=="BROWSER_USER_AGENT"){
   // your code
}

用户代理列表可在线获取。

Answer 4

有关示例，请参阅此JSFiddle。

这支持IE 7 - 11，WebKit（Chrome，Safari等）和Gecko（Firefox等）。

使用JavaScript检测用户代理并根据哪个浏览器将类应用于正文：

<script>
var ua = navigator.userAgent;
if (!ua.contains("MSIE")) { // If it doesn't contain MSIE
    document.body.classList.add("not-ie");
    if (ua.contains("(Windows NT 6.3; Trident/7.0; rv:11.0)")) {            
    // IE11 pretends to not be IE and doesn't contain MSIE in the 
    // default user agent, but it contains the string above
        document.body.classList.remove("not-ie");
        document.body.classList.add("ie", "ie11");
    } else if(ua.contains("Gecko")) {
        document.body.classList.add("gecko");
    } else if(ua.contains("WebKit")) {
        document.body.classList.add("webkit");
    }
} else {
    document.body.classList.add("ie");
    if (ua.contains("11.0")) {
        // Just in case we're using an alternative user agent
        document.body.classList.add("ie11");
    } else if (ua.contains("10.6") || ua.contains("10.0")) {
        document.body.classList.add("ie10");
    } else if (ua.contains("9.0")) {
        document.body.classList.add("ie9");
    } else if (ua.contains("8.0")) {
        document.body.classList.add("ie8");
    } else if (ua.contains("7.0")) {
        document.body.classList.add("ie7");
    };
};
</script>

Answer 5

主要解决方案：

我忘记了我在哪里获得了这个功能，所以我不能正确地给予它功劳，但它的效果非常好：

function getInternetExplorerVersion() {
    var rv = -1; // Return value assumes failure.
    if (navigator.appName == 'Microsoft Internet Explorer') {
        var ua = navigator.userAgent;
        var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null)
            rv = parseFloat(RegExp.$1);
    }

    if (rv > -1) {
        return rv;
    }
    else {
        return 0;
    }
}

所以你能做的就是：

if(getInternetExplorerVersion() == 6) {
    $('head').append('<link id="styles" rel="stylesheet" type="text/css" href="/ie6Styles.css" />');
}

或类似的东西。

其他解决方案： 对于其他浏览器，您还可以执行以下操作：

var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
var is_explorer = navigator.userAgent.indexOf('MSIE') > -1;
var is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
var is_safari = navigator.userAgent.indexOf("Safari") > -1;
var is_Opera = navigator.userAgent.indexOf("Presto") > -1;
var is_Silk = navigator.userAgent.indexOf("Silk") > -1;
var is_Kindle = navigator.userAgent.indexOf("Kindle") > -1;

我更喜欢这些用于iPad / iPod / iPhone：

if (navigator.userAgent.match(/iPad/)) { iPad = true; }
if (navigator.userAgent.match(/iPhone/) || navigator.userAgent.match(/iPod/)) { iPhone = true; }

Modernizr效果很好，但它只会让您知道浏览器是否可以处理某些功能。有时您实际上必须针对特定浏览器定位其他修复，例如样式。这是上述任何解决方案都可以派上用场的地方。祝你好运，如果你有任何问题，请告诉我。