首先講一下css hack這東西
由于不同的瀏覽器，甚至同一瀏覽器的不同版本對CSS的解析認(rèn)識不一樣，導(dǎo)致生成的頁面效果不一致，寫出針對不同瀏覽器CSS code就稱為CSS hack。
常用的CSS hack 有三種方式，CSS 內(nèi)部hack、選擇器hack、HTML 頭部引用，其中第一種最常用。
CSS3中的常見寫法：
/Mozilla內(nèi)核瀏覽器：firefox3.5+/ -moz-transform: rotate | scale | skew | translate ;
/Webkit內(nèi)核瀏覽器：Safari and Chrome/ -webkit-transform: rotate | scale | skew | translate ;
/Opera/ -o-transform: rotate | scale | skew | translate ;
/IE9/ -ms-transform: rotate | scale | skew | translate ;
/W3C標(biāo)準(zhǔn)/ 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頭部應(yīng)用之前先了解個概念
lte：小于或等于
lt ：小于
gte：大于或等于
gt ：大于
! ：非
是否是IE下的判斷：
也可以在其中加入
<link rel="stylesheet" type="text/css" href="ie.css" />
依照個人情況而定
是否是IE8及以下的判斷：(以VUE的支持為范圍為分界線，個人寫法，可自行改變)
可在內(nèi)容里添加對應(yīng)的操作，比如提示用戶升級瀏覽器并且給出升級的網(wǎng)站地址
百度得到的判斷時候是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" 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+ 才得到支持。
其實(shí)主要用到瀏覽器是否支持websocket來判斷是否是IE9及以下，后面的判斷狀態(tài)是否是closing在此處似乎也沒什么作用，可能我不太了解吧，不過問題不大。
/加點(diǎn)東西：
webSocket.readyState屬性返回實(shí)例對象的當(dāng)前狀態(tài)，共有四種。
CONNECTING：值為0，表示正在連接。
OPEN：值為1，表示連接成功，可以通信了。
CLOSING：值為2，表示連接正在關(guān)閉。
CLOSED：值為3，表示連接已經(jīng)關(guān)閉，或者打開連接失敗。/
對于不同公司業(yè)務(wù)，對于瀏覽器判斷類型可以通過navigator.userAgent來實(shí)現(xiàn)，方法如下：
function IEVersion() { //由于微軟IE最高更新到IE11，edge為微軟推出的新瀏覽器定義為12，其他瀏覽器統(tǒng)一判斷為13,以vue為基礎(chǔ) 將以小于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瀏覽器
}
}
