首先讲一下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浏览器
}
}
