前端浏览器兼容性解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/frontend/article/details/5757853

新的前端浏览器兼容方法

js判断浏览器并返回缩写，把缩写作为类名加到<html>的class里，css里以缩写类区分样式
无CSS Hack，无条件注释，单个CSS文件，调试维护都方便，具体如下：

js判断浏览器及版本并返回缩写，如 ff, ie6, ie7...

function getBrowser(){
var Sys = {}; var ua = navigator.userAgent.toLowerCase();

// 判断方法1：根据各浏览器的唯一特征判断(2010-07-23)
// window.ActiveXObject ? Sys.ie = ua.match(/msie ([/d.]+)/)[1] :
// document.getBoxObjectFor ? Sys.firefox = ua.match(/firefox//([/d.]+)/)[1] :
// window.MessageEvent && !document.getBoxObjectFor ? Sys.chrome = ua.match(/chrome//([/d.]+)/)[1] :
// window.opera ? Sys.opera = ua.match(/opera.([/d.]+)/)[1] :
// window.openDatabase ? Sys.safari = ua.match(/version//([/d.]+)/)[1] : 0;

    // 判断方法2：根据userAgent的返回信息判断
    var s;
    (s = ua.match(/msie ([/d.]+)/)) ? Sys.ie = s[1] :
    (s = ua.match(/firefox//([/d.]+)/)) ? Sys.firefox = s[1] :
    (s = ua.match(/chrome//([/d.]+)/)) ? Sys.chrome = s[1] :
    (s = ua.match(/opera.([/d.]+)/)) ? Sys.opera = s[1] :
    (s = ua.match(/version//([/d.]+).*safari/)) ? Sys.safari = s[1] : 0;

    // 返回缩写 // 这里我只判别大版本甚至不判别版本而且只做了ie和ff的返回可根据需要修改
    if (Sys.ie) return 'ie'+Sys.ie.split('.')[0];                        //IE
    if (Sys.firefox) return 'ff';                                              //Firefox
    //if (Sys.chrome) return 'ch'+Sys.chrome.split('.')[0];   //Chrome
    //if (Sys.opera) return 'op'+Sys.opera.split('.')[0];       //Opera
    //if (Sys.safari) return 'sa'+Sys.safari.split('.')[0];        //Safari

};

// 另一个更详尽和可能更准确的特征判断加入了IE9的判断未测
// 来源:http://blog.youkuaiyun.com/satans18/archive/2010/04/19/5502129.aspx [2010.04.18]
function getBrowser_UF(){
    var isIE = !','.split(/,/).length,
    isIE6 = isIE && !window.XMLHttpRequest,
    isIE8 = !!window.XDomainRequest,
    isIE9 = isIE && !!+'/v1',   // alt: !!-[1,]
    isIE7 = isIE && !isIE6 && !isIE8 && !isIE9,
    isFF = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,   // gecko
        /* Firefox 重大里程碑版本的特征判断不建议纳入除非需要区别这些版本的差异 */
        //isFF36 = 'mozInnerScreenX' in window, // alt: !!document.body.mozMatchesSelector
        //isFF35 = !!Object.getPrototypeOf,
        //isFF2 = !!window.globalStorage,
        //isFF3 = isFF2 && !!win.MessageEvent, // alt: 'reduce' in Array
        //isFF15 = 'some' in Array,
    isOP = !!window.opera && !!window.opera.toString().indexOf('Opera'),
    isOP9 = /^function /(/.test([].sort),
    isWK = !!window.devicePixelRatio,   // web-kit
    isSF = /a/.__proto__ == '//',   // safari
    isCR = /s/.test(/a/.toString); // chrome

    return isIE6?'ie ie6':isIE8?'ie ie8':isIE9?'ie ie9':isIE7?'ie ie7':isFF?'ff':
        //isFF36?'ff ff36':isFF35?'ff ff35':isFF2?'ff ff2':isFF3?'ff ff3':isFF15?'ff ff15':
        isOP?'op':isOP9?'op op9':isWK?'wk':isSF?'wk sa':isCR?'wk cr':0;
}

关于js判断方法网上有很多资料，而且不断在更新

把缩写加入html的class

$(function(){
$('html').addClass(getBrowser());
});
有时候我们需要在<body>里加class，为了避免影响我把类加到了更上级的<html>里
<html class="ff" ......>

CSS里以最前面的缩写类名来区分不同浏览器

#block_Gallery { border:1px solid black; } /* default */
.ff #block_Gallery { border:1px solid red; } /* firefox */
.ie6 #block_Gallery { border:1px solid green; } /* ie6 */
.ie7 #block_Gallery { border:1px solid blue; } /* ie7 */

不过这样的处理应该尽量的少，代码紧靠标准，设计实现上必要时轻微的妥协或变换，勤奋的测试和完善，或许加上一点点巧妙，就可以做到

－－－－－－－－－－－－
优点：
！No CSS Hack （没有复杂的规则和怪异的符号没有验证的问题）
！No Conditional Comments （条件注释会增加html代码且局限于IE的判别）
！无需增加CSS文件请求，各浏览器样式差别写在一起方便维护

暂时没有应用到具体的项目中，怕不成熟或有缺陷，在斟酌斟酌，欢迎发表看法！