一、科普IE條件注釋
IE條件注釋功能是條件注釋是IE特有的一種功能狮惜，能對(duì)IE系列產(chǎn)品進(jìn)行單獨(dú)的XHTML代碼處理高诺，注意，主要是針對(duì)XHTML,而非CSS碾篡。條件注釋功能非常強(qiáng)大虱而，可以進(jìn)行true和false判斷。
最大好處：IE條件注釋 屬于微軟官方給出的兼容解決辦法而且還能通過(guò)W3C的效驗(yàn)开泽。
上個(gè)栗子：
<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
語(yǔ)句的意思是：IE8瀏覽器下牡拇，引入my.css文件。其他版本IE瀏覽器穆律，if判斷為flase惠呼，則不引入。
關(guān)鍵詞解釋
lt ：Less than的簡(jiǎn)寫峦耘，小于剔蹋。
lte ：Less than or equal to的簡(jiǎn)寫，小于或等于辅髓。
gt ：Greater than的簡(jiǎn)寫泣崩，大于少梁。
gte：Greater than or equal to的簡(jiǎn)寫，大于或等于律想。
!：不等于猎莲。
二绍弟、引導(dǎo)升級(jí)實(shí)現(xiàn)
1）嗅探低版本小于IE9的用戶
<!--[if lt IE 9]>
// IE瀏覽器版本低于IE9的用戶
<![endif]-->
2）強(qiáng)制跳轉(zhuǎn)頁(yè)面的js
<script type="text/javascript">
window.location.href = "http://"+ window.location.host +"/kill-IE.html";
</script>
3）雙劍合并
<!--[if lt IE 9]>
<script type="text/javascript">
window.location.href = "http://"+ window.location.host +"/kill-IE.html";
</script>
<![endif]-->
三技即、優(yōu)化升級(jí)
在實(shí)際使用場(chǎng)景中，用戶升級(jí)瀏覽器后樟遣，可能會(huì)復(fù)制kill-IE.html的頁(yè)面url進(jìn)行第二次訪問(wèn)而叼。
?這就帶來(lái)一個(gè)問(wèn)題：用戶怎么刷新，還是停留在kill-IE.html這個(gè)頁(yè)面豹悬。
kill-IE.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>kill-IE</title>
</head>
<body>
<p>
<span>推薦瀏覽器：</span>
<a title="谷歌" target="_blank" >Google瀏覽器</a>
</p>
</body>
</html>
解決方法：
kill-IE.html頁(yè)面葵陵，判斷當(dāng)前瀏覽的是不是低版本瀏覽器，不是的話瞻佛，自動(dòng)跳轉(zhuǎn)回訪問(wèn)之前的頁(yè)面或者首頁(yè)脱篙。
1)記錄跳轉(zhuǎn)kill-IE.html之前，所在頁(yè)面的url
將url作為一個(gè)參數(shù)值伤柄，添加在跳轉(zhuǎn)鏈接上
<!--[if lt IE 9]>
<script type="text/javascript">
(function(){
var _location = window.location;
_location.href = "http://"+ _location.host +"/kill-IE.html?url="+ encodeURIComponent(_location.href);
})();
</script>
<![endif]-->
2)修改kill-IE.html
?修改kill-IE.html的處理邏輯绊困，增加判斷當(dāng)前瀏覽器是否為低版本瀏覽器，如果不是低版本的瀏覽器适刀，則不需要停留在當(dāng)前頁(yè)面秤朗。
跳轉(zhuǎn)重定向解決方式：
?獲取當(dāng)前href的url參數(shù)。
?如果有笔喉，則進(jìn)行跳轉(zhuǎn)取视。
?沒(méi)有該參數(shù)，則默認(rèn)跳轉(zhuǎn)回主域名常挚。
在線演示：https://wall-wxk.github.io/blogDemo/2017/01/20/kill-IE.html
?模擬訪問(wèn)來(lái)源是百度：https://wall-wxk.github.io/blogDemo/2017/01/20/kill-IE.html?url=http%3A%2F%2Fwww.baidu.com
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>kill-IE</title>
<script>
var isGoodBrowser = true; // 默認(rèn)標(biāo)記為現(xiàn)代瀏覽器
</script>
<!--[if ltIE 9]>
<script>
isGoodBrowser = false; // 標(biāo)記為需要升級(jí)的低版本瀏覽器
</script>
<![endif]-->
<script type="text/javascript">
(function(){
// 如果是低級(jí)版本瀏覽器作谭，則不進(jìn)行重定向跳轉(zhuǎn)
if(!isGoodBrowser){
return;
}
var _location = window.location,
_search = _location.search.substring(1), // url參數(shù)
_jumpUrl = "http://"+_location.host, // 主域名
_params, // 參數(shù)集合
_item, // 單個(gè)參數(shù)
_result = "", // 最后得到的跳轉(zhuǎn)url
_len;
// 抓取url參數(shù)
if(_search.indexOf("url") != -1){
_params = _search.split("&");
_len = _params.length;
while(_len){
_len -= 1;
_item = _params[_len];
if(_item.indexOf("url=") != -1){
result = _item.split("=")[1];
if(result.length > 0){
_jumpUrl = decodeURIComponent(result); // 轉(zhuǎn)義回普通字符
}
break;
}
}
}
_location.href = _jumpUrl; // 跳轉(zhuǎn)頁(yè)面
})();
</script>
</head>
<body>
<p>
<span>推薦瀏覽器：</span>
<a title="谷歌" target="_blank" >Google瀏覽器</a>
</p>
</body>
</html>
完美解決！ _ Y
喜歡我文章的朋友奄毡，掃描以下二維碼丢早，關(guān)注我的個(gè)人技術(shù)博客，我的技術(shù)文章會(huì)第一時(shí)間在博客上更新
點(diǎn)擊鏈接wall的個(gè)人博客
