浏览器兼容之浏览器版本处理

[LiuYueKai]

前端开发过程中，浏览器的兼容处理是不可避免的工作，本次主要在HTML、CSS、JS三个方面对于判断浏览器版本进行说明

HTML

在HTML代码中主要以识别IE版本为主，以下为示例

<!–[if IE 6]> 仅IE6可识别 <![endif]–>
<!–[if lte IE 6]> IE6及其以下版本可识别 <![endif]–>
<!–[if lt IE 6]> IE6以下版本可识别 <![endif]–>
<!–[if gte IE 6]> IE6及其以上版本可识别 <![endif]–>
<!–[if gt IE 6]> IE6以上版本可识别 <![endif]–>
<!–[if IE]> 所有的IE可识别 <![endif]–>
<!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–>

CSS

CSS 代码中，则可以根据各浏览器自己独立的可识别的特殊代码来编写区分浏览器的代码，例如为IE系列浏览器可读[\9]，而IE6和IE7可读[*]，另外 IE6可辨识 _ ；由于CSS读取时是按从上到下来的，同样属性靠后写的生效，因此可以依照顺序写下来，就会让每个浏览器正确的读取到自己看得懂得CSS语法。

.classname{
    background:blue; /*所有浏览器都可以识别*/
    background:red \9; /*IE8 背景变红色*/
    *background:black; /*IE7 背景变黑色*/
    _background:orange; /*IE6 背景变橘色*/
}

.classname {
    background:black !important; /*非IE6 背景变黑色*/
    background:orange; /*IE6 背景变橘色*/
}

JS

在js代码中可以通过navigator.userAgent来判断浏览器版本的具体信息，如果上面的方式都不能很好的满足需求，在js中可以精确到浏览器的具体版本，可以更加精确的进行处理。以下为iuap-design中对于浏览器版本信息的处理。

var userAgent = navigator.userAgent,
        rMsie = /(msie\s|trident.*rv:)([\w.]+)/,
        rFirefox = /(firefox)\/([\w.]+)/,
        rOpera = /(opera).+version\/([\w.]+)/,
        rChrome = /(chrome)\/([\w.]+)/,
        rSafari = /version\/([\w.]+).*(safari)/,
        version,
        ua = userAgent.toLowerCase(),
        s,
        browserMatch = { browser : "", version : ''},
        match = rMsie.exec(ua);

if (match != null) {
    browserMatch =  { browser : "IE", version : match[2] || "0" };
}
match = rFirefox.exec(ua);
if (match != null) {
    browserMatch =  { browser : match[1] || "", version : match[2] || "0" };
}
match = rOpera.exec(ua);
if (match != null) {
    browserMatch =  { browser : match[1] || "", version : match[2] || "0" };
}
match = rChrome.exec(ua);
if (match != null) {
    browserMatch =  { browser : match[1] || "", version : match[2] || "0" };
}
match = rSafari.exec(ua);
if (match != null) {
    browserMatch =  { browser : match[2] || "", version : match[1] || "0" };
}
if (match != null) {
    browserMatch =  { browser : "", version : "0" };
}


if (s=ua.match(/opera.([\d.]+)/)) {
    u.isOpera = true;
}else if(browserMatch.browser=="IE"&&browserMatch.version==11){
    u.isIE11 = true;
    u.isIE = true;
}else if (s=ua.match(/chrome\/([\d.]+)/)) {
    u.isChrome = true;
    u.isStandard = true;
} else if (s=ua.match(/version\/([\d.]+).*safari/)) {
    u.isSafari = true;
    u.isStandard = true;
} else if (s=ua.match(/gecko/)) {
    //add by licza : support XULRunner
    u.isFF = true;
    u.isStandard = true;
} else if (s=ua.match(/msie ([\d.]+)/)) {
    u.isIE = true;
}

else if (s=ua.match(/firefox\/([\d.]+)/)) {
    u.isFF = true;
    u.isStandard = true;
}
if (ua.match(/webkit\/([\d.]+)/)) {
    u.isWebkit = true;
}
if (ua.match(/ipad/i)){
    u.isIOS = true;
    u.isIPAD = true;
    u.isStandard = true;
}
if (ua.match(/iphone/i)){
    u.isIOS = true;
    u.isIphone = true;
}

if((navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel")){
    //u.isIOS = true;
    u.isMac = true;
}

if((navigator.platform == "Win32") || (navigator.platform == "Windows") || (navigator.platform == "Win64")){
    u.isWin = true;
}

if((navigator.platform == "X11") && !u.isWin && !u.isMac){
    u.isUnix = true;
}
 if((String(navigator.platform).indexOf("Linux") > -1)){
u.isLinux = true;
}

if(ua.indexOf('Android') > -1 || ua.indexOf('android') > -1 || ua.indexOf('Adr') > -1 || ua.indexOf('adr') > -1){
u.isAndroid = true;
}

u.version = version ? (browserMatch.version ?  browserMatch.version : 0) : 0;
if (u.isIE) {
    var intVersion = parseInt(u.version);
    var mode = document.documentMode;
    if(mode == null){
        if (intVersion == 6 || intVersion == 7) {
            u.isIE8_BEFORE = true;
        }
    }
    else{
        if(mode == 7){
            u.isIE8_BEFORE = true;
        }
        else if (mode == 8) {
            u.isIE8 = true;
        }
        else if (mode == 9) {
            u.isIE9 = true;
            u.isSTANDARD = true;
        }
        else if (mode == 10) {
            u.isIE10 = true;
            u.isSTANDARD = true;
            u.isIE10_ABOVE = true;
        }
        else{
            u.isSTANDARD = true;
        }
        if (intVersion == 8) {
            u.isIE8_CORE = true;
        }
        else if (intVersion == 9) {
            u.isIE9_CORE = true;
        }
        else if(browserMatch.version==11){
            u.isIE11 = true;
        }
        else{

        }
    }
}
if("ontouchend" in document) {
    u.hasTouch = true;
}
if(u.isIOS || u.isAndroid)
    u.isMobile = true;