浏览器兼容性问题 | simmyo_z的博客

一个记录日常结局浏览器兼容问题的备忘录

1. 如何查看某个javaScript 对象或者css 属性的兼容性

到MND搜索需要查看的内容,页面底部提供一份不同平台(比如PC端,手机端,node端)以及不同浏览器进行和其各个历史版本的兼容表格,可以很直观的看到你要用的技术是否支持业务覆盖的浏览器或者平台.

2. 浏览器强制用webkit内核
   国内部分双核浏览器如：360极速浏览器、搜狗浏览器、百度浏览器等等，这些浏览器都号称拥有两个内核，用户可以根据需要自由切换。双核浏览器的2个内个分别为极速内核（webkit内核），兼容内核（trident内核）。使用极速内核浏览器会按照w3c的新标准渲染页面，其结果是渲染速度更快，规范性更好。而兼容内核也并非一无是处，国内很多政府、银行类网站在编写之初考虑了兼容旧版本ie的trident内核，其代码并非为w3c规范的标准，而是浏览器厂商自定义的模式，这类网站则必须使用兼容模式打开，如果使用极速模式打开就会产生布局错乱等问题。

可以用下面的标签强制浏览器使用极速内核:

也可以使用兼容的写法:

这里会根据先后顺序,启用支持的内核,不支持也不会

3. 重置样式
   不同的浏览器之间基本样式很不一样，比如IE浏览器使用ie盒子模型，现代浏览器大多使用标准盒子模型。他们之间的宽度计算很不一样。
   这个时候就需要用reset.css重置一下样式了

@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* 清除浮动 */
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden; height:0;} 
.clearfloat{zoom:1} 

4. 浏览器类型判断

// 浏览器类型判断
function browserType () {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
    var isIE = window.ActiveXObject || "ActiveXObject" in window
    var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
    var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
    var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
    var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1 && !isEdge; //判断Chrome浏览器
    if (isIE) {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        if (userAgent.indexOf('MSIE 6.0') != -1) {
            return "IE6";
        } else if (fIEVersion == 7) {
            return "IE7";
        }
        else if (fIEVersion == 8) {
            return "IE8";
        }
        else if (fIEVersion == 9) {
            return "IE9";
        }
        else if (fIEVersion == 10) {
            return "IE10";
        }
        else if (userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)) {
            return "IE11";
        }
        else {
            return "0"
        }//IE版本过低
    }
    if (isFF) {
        return "FF";
    }
    if (isOpera) {
        return "Opera";
    }
    if (isSafari) {
        return "Safari";
    }
    if (isChrome) {
        return "Chrome";
    }
    if (isEdge) {
        return "Edge";
    }
}

5. html if 判断浏览器ie版本

<!--[if !IE]> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

~~未完待续