IE浏览器下兼容判断

首先讲一下css hack这东西

由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack。

常用的CSS hack 有三种方式，CSS 内部hack、选择器hack、HTML 头部引用，其中第一种最常用。

CSS3中的常见写法：

/Mozilla内核浏览器：firefox3.5+/ -moz-transform: rotate | scale | skew | translate ;

/Webkit内核浏览器：Safari and Chrome/ -webkit-transform: rotate | scale | skew | translate ;

/Opera/ -o-transform: rotate | scale | skew | translate ;

/IE9/ -ms-transform: rotate | scale | skew | translate ;

/W3C标准/ transform: rotate | scale | skew | translate ;

1.IE8以及以下版本浏览器

.ie6_7_8{

 color:blue; /*所有浏览器*/

color:red\9; /*IE8以及以下版本浏览器*/

}

2.IE7以及以下版本浏览器

.ie6_7_8{

color:blue; /*所有浏览器*/

color:red\9; /*IE8以及以下版本浏览器*/

*color:green; /*IE7及其以下版本浏览器*/

}

3.IE6浏览器

.ie6_7_8{

color:blue; /所有浏览器/

color:red\9; /IE8以及以下版本浏览器/

color:green; /IE7及其以下版本浏览器*/

_color:purple; /IE6浏览器/

}

HTML头部应用之前先了解个概念

lte：小于或等于

lt ：小于

gte：大于或等于

gt ：大于

! ：非

是否是IE下的判断：

也可以在其中加入

<link rel="stylesheet" type="text/css" href="ie.css" />

依照个人情况而定

是否是IE8及以下的判断：(以VUE的支持为范围为分界线，个人写法，可自行改变)

可在内容里添加对应的操作，比如提示用户升级浏览器并且给出升级的网站地址

百度得到的判断时候是IE9及以下的方法中，除了用HTML头部方法，还有一段JS

 (function (w) {
        if (!("WebSocket" in w && 2 === w.WebSocket.CLOSING)) {
            var d = document.createElement("div");
            d.className = "browsehappy";
            d.innerHTML = '<div style="width:100%;height:100px;font-size:20px;line-height:100px;text-align:center;background-color:#E90D24;color:#fff;margin-bottom:40px;">\u4f60\u7684\u6d4f\u89c8\u5668\u5b9e\u5728<strong>\u592a\u592a\u65e7\u4e86</strong>\uff0c\u592a\u592a\u65e7\u4e86 <a target="_blank" href="http://browsehappy.osfipin.com/" style="background-color:#31b0d5;border-color: #269abc;text-decoration: none;padding: 6px 12px;background-image: none;border: 1px solid transparent;border-radius: 4px;color:#FFEB3B;">\u7acb\u5373\u5347\u7ea7</a></div>';
            var f = function () {
                var s = document.getElementsByTagName("body")[0];
                if ("undefined" == typeof(s)) {
                    setTimeout(f, 10)
                } else {
                    s.insertBefore(d, s.firstChild)
                }
            };
            f()
        }
    }(window));

这里解释下为什么可以这么做：
Web Sockets 目前在各个浏览器到终端支持性并不好， 只有IE 10+， FF 34+， Chrome 31+， Safari 7.1+， Android Browser 4.4+ 才得到支持。
其实主要用到浏览器是否支持websocket来判断是否是IE9及以下，后面的判断状态是否是closing在此处似乎也没什么作用，可能我不太了解吧，不过问题不大。
/加点东西：
webSocket.readyState属性返回实例对象的当前状态，共有四种。
CONNECTING：值为0，表示正在连接。
OPEN：值为1，表示连接成功，可以通信了。
CLOSING：值为2，表示连接正在关闭。
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。/

对于不同公司业务，对于浏览器判断类型可以通过navigator.userAgent来实现，方法如下：

 function IEVersion() { //由于微软IE最高更新到IE11，edge为微软推出的新浏览器定义为12，其他浏览器统一判断为13,以vue为基础 将以小于9为提示升级浏览器，大于则不判断
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
        var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
        var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
        if (isIE) {
            var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
            reIE.test(userAgent);
            var fIEVersion = parseFloat(RegExp["$1"]);
            if (fIEVersion === 7) {
                return 7;
            } else if (fIEVersion === 8) {
                return 8;
            } else if (fIEVersion === 9) {
                return 9;
            } else if (fIEVersion === 10) {
                return 10;
            } else {
                return 6;//IE版本<=7
            }
        } else if (isEdge) {
            return 12;//edge
        } else if (isIE11) {
            return 11; //IE11
        } else {
            return 13;//不是ie浏览器
        }
    }