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下的判断:


也可以在其中加入


依照个人情况而定

是否是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 = '
\u4f60\u7684\u6d4f\u89c8\u5668\u5b9e\u5728\u592a\u592a\u65e7\u4e86\uff0c\u592a\u592a\u65e7\u4e86 \u7acb\u5373\u5347\u7ea7
'; 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浏览器
        }
    }

你可能感兴趣的:(IE浏览器下兼容判断)