Fatal编程技术网
  • javascript/
  • Javascript 为不同的浏览器添加类

Javascript 为不同的浏览器添加类

javascript jquery html css

Javascript 为不同的浏览器添加类,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我知道这是个老问题。我想为不同的浏览器（主要是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"> <![e

我知道这是个老问题。我想为不同的浏览器（主要是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]-->
这里的问题是，现在条件注释已经从ie10+中消失了，我希望所有ie版本都有特定的类。如果我也能获得webkit和moz浏览器的课程，那就太好了

这样做的目的是从我现有的样式表中删除所有css攻击

我想要的东西应该像这样工作，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]-->
每个浏览器都有一个用户代理，因此您可以使用以下内容：

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

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;
用户代理列表在线提供。

使用以下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})();

（函数（）{
var v=3，
div=document.createElement（'div'），
all=div.getElementsByTagName（'i'），
浏览器
伊西；
而（div.innerHTML=''，all[0]）；
v=v>4？v：document.documentMode；
如果（v）{
browser=“ie”
对于（变量i=5；i）{
浏览器+='gte ie'+i；
}else如果（v==i）{
浏览器+='ie'+i；
}
}
伊西={
“版本”：v
}
}否则{
浏览器=‘不是ie’；
isIE=假；
}
document.documentElement.className+=浏览器；
window.ie=isIE；
}());
缩小：

(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})();

（function（）{for（var a=3，b=document.createElement（“div”），c=b.getElementsByTagName（“i”）；b.innerHTML=“\x3c！-[如果gt IE”+++a+”]>一些参考资料可以帮助您：



以下是其他几个需要检查的站点：






请参见此示例

它支持IE7-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>




var ua=navigator.userAgent；
如果（！ua.contains（“MSIE”）{//如果它不包含MSIE
document.body.classList.add（“非ie”）；
如果（ua.contains（（WindowsNT6.3；Trident/7.0；rv:11.0））{
//IE11假装不是IE，并且在中不包含MSIE
//默认用户代理，但它包含上面的字符串
document.body.classList.remove（“非ie”）；
document.body.classList.add（“ie”、“ie11”）；
}否则，如果（ua.包含（“壁虎”））{
document.body.classList.add（“gecko”）；
}else if（ua.contains（“WebKit”））{
document.body.classList.add（“webkit”）；
}
}否则{
document.body.classList.add（“ie”）；
如果（ua.包含（“11.0”））{
//以防万一我们正在使用另一个用户代理
document.body.classList.add（“ie11”）；
}如果（ua.包含（“10.6”）| | ua.包含（“10.0”））{
document.body.classList.add（“ie10”）；
}否则，如果（ua.包含（“9.0”））{
document.body.classList.add（“ie9”）；
}否则，如果（ua.包含（“8.0”））{
document.body.classList.add（“ie8”）；
}否则，如果（ua.包含（“7.0”））{
document.body.classList.add（“ie7”）；
};
};

主要解决方案：


(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})();


我忘了这个函数是从哪里来的，所以我不能完全相信它，但它确实工作得很好：


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" />');
}


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


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



Modernizr工作得很好，但它只让你知道浏览器是否可以处理某些功能。有时你实际上必须针对特定的浏览器进行其他修复，如样式。这正是上述任何解决方案都可以派上用场的地方。祝你好运，如果你有任何问题，请告诉我。
你可以选择某种JavaScript d但那将是绕圈子，而不是直接解决问题。这通常被称为创可贴修复

你不应该在IE11、IE10甚至IE9上使用黑客软件。它们是相当有能力且符合标准的浏览器

我将研究解决其核心问题——清理和简化标记，确保其有效性，关闭所有标记，声明维度，使用CSS重置，清除浮动等

如果你的问题与布局相关

如果它们不是，而您使用的是一些在任何地方都不受支持的前沿功能，请使用功能检测，而不是浏览器检测

这就是微软停止支持条件注释的确切原因。这也是他们在IE11中更改用户代理以完全忽略浏览器实际上是IE的原因


他们这样做是为了鼓励正确的功能检测，即现代化，而不是UA嗅探，因为这是一个坏主意。
在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);
}



我想看一看Modernizer大多数现代浏览器不需要黑客攻击…可能有任何js解决方案可以满足我的目的吗？顺便说一句，在大多数情况下，你可以通过简单的if语句知道某个功能是否受支持。我知道，但有时开发人员需要一些针对特定IE浏览器版本的条件CSS。使用上述脚本，你可以写得像“.ie8.someDiv{}”谢谢..@Ovais Mohd..它可以工作，你能让它像ie7-ie9那样工作吗它应该有类“.lte-ie10”，而ie7-ie8有公共类“.lte-ie9"嗨，Praveen，我已根据要求对脚本进行了更改。你能将答案标记为“接受答案”吗？IE并不总是在所有版本中正确呈现所有内容。有时，你需要针对特定版本并实现非常特定的样式，以确定它呈现内容的方式。你确实可以很好地说明任何基于功能的问题s应该由Modernizer处理，我100%支持这一说法。我只是认为一些问题，比如一些浏览器渲染问题，不能用完美的HTML全部解决。我之所以这么说，是因为我在