IE兼容/IE5兼容踩过的坑
目錄
前言
1.確認好需求
2.jQuery版本
3.語法
4.ajax請求
5.下拉框插件
6.多層級下拉框插件
7.日期選擇器插件
8.分頁插件
9.彈窗
總結
前言
????????沒想到吧，這年頭還有人用IE5呢，但是沒辦法，有些畢竟老的機構開發的系統比較早，那時候寫的是IE5的內核，到現在需要增加一些小功能，所以需要兼容IE5。好了，廢話不多說，下面小譚把我用的能夠兼容IE5的插件以及踩過的坑給大家總結一下。
1.確認好需求
? ? ? ? 一定一定一定要確認好客戶使用的是什么版本內核的IE，我這邊客戶說的是兼容到IE11，說的是瀏覽器的版本為IE11，并不是內核版本，雖說IE瀏覽器的版本為11，但是內核版本還是IE5。所以一定要確認好客戶使用的IE內核的版本。
2.jQuery版本
? ? ? ? jQuery版本我測試過的，能夠兼容到IE5的版本一定要是2.0以下的，并且1.0版本的jQuery有一個版本也有問題，就是1.10.1。這個版本的jq在IE5上會報錯，但是1.10.2版本不會了，應該是修復了吧。
3.語法
切記！！IE5不支持ES5和ES6語法以及CSS3新特性，常見容易踩坑的有：
- 變量的聲明方式；低版本ie不支持let和const聲明變量方式
- 不支持箭頭函數，匿名函數只能用傳統的寫法；
- 不支持三目運算符；
- 數組不支持forEach、map等方法；
- 不支持for...in和for...of循環；
- 不支持JSON對象；
- 寫好之后最好檢查一下有沒有console.log()沒有注釋掉，我遇到過線上console報錯的；
- 對象的最后一個屬性不要加逗號；
- Object.keys方法和Object.values方法不支持；
- IE5不支持絕對定位屬性；
- 不支持nth選擇器；
- 不支持flex布局；
- 不支持子代選擇器（>）;
- 不支持最大最小寬度和高度；
- 不支持透明度、圓角屬性、過渡動畫、transition等等；
4.ajax請求
? ? ? ? 對于低版本的IE，請求千萬不要使用jq封裝好的ajax，jq封裝好的ajax請求只適用于IE高版本，應該是IE8及以上，使用在IE低版本會出現拒絕訪問的問題。
? ? ? ? 當時遇到這個問題的時候，相信大家和我一樣，自己手寫一個原生的請求；然后我寫了，但是！還是有問題，原生的請求IE也會出現兼容問題。找了大量的文獻（其實是去某度），然后寫出了IE原生請求的兼容寫法：
var Xmlhttp = null;if (window.XMLHttpRequest) { // code for IE7, Firefox, Opera, etc.Xmlhttp = new XMLHttpRequest();} else if (window.ActiveXObject) { // code for IE6, IE5Xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}if (Xmlhttp != null) {Xmlhttp.onreadystatechange = function () {if (Xmlhttp.readyState == 4) { // 4 = "loaded"if (Xmlhttp.status == 200) { // 200 = "OK"//這里寫成功時的操作console.log("后端返回給的數據", Xmlhttp.responseText); //JSON字符串} else {alert("Problem retrieving XML data:" + Xmlhttp.statusText);}}};Xmlhttp.open("GET", 請求地址, true);Xmlhttp.send(null);} else {alert("Your browser does not support XMLHTTP.");}這時候文件在本地文件夾直接打開請求是成功的，但是！！發布到線上時，請求就會報錯，然后我又查閱了大量的文獻（某度），發現是跨域的問題，然后在線上配置nginx，使用反向代理就可以啦~
有細心的小伙伴發現了，我上面請求寫的后端返回的數據是Xmlhttp.responseText，返回的是一個JSON字符串，但是我在上面寫道IE5是沒有JSON對象的，那該這么將后端給我的轉為JSON對象嘞，既然IE5不支持JSON對象，那我們就自己寫一個，哈哈，自己寫是不可能自己寫的，在網上找到了寫好的，下載地址：https://github.com/douglascrockford/JSON-js?下載好之后引入在項目頭部引入一下就OK了。
5.下拉框插件
? ? ? ? IE自帶的輸入框，下拉框都不怎么好看，輸入框還好，可以自己改一下樣式，但是下拉框就很頭疼，所以下拉框我選擇使用jq美化插件，插件名稱：jQuery?Selectric，可以切換喝多風格，最重要的，它能夠兼容IE5！！我是下載的zip壓縮包，然后引入的靜態文件，具體的使用方法大家可以參照他這邊的官方文檔。另附上使用效果：
6.多層級下拉框插件
? ? ? ? 由于項目需求，難免會遇到多層級選擇的問題，我這邊用的是?comboTreePlugin，雖然這個功能能夠兼容IE5，但是一些樣式不能夠兼容，所以運到到我這邊的項目的時候，我做了一點樣式的改動。并且搜索不能夠使用，后面我自己把這個搜索框拿掉了，其實這個多層級下拉框兼容IE5一般，但是由于項目周期問題，所以就用了這個，雖然有點問題，但是用在我這邊的項目里足夠了，如果大家遇到更好的兼容插件歡迎在評論區分享呀，另附上使用效果：
7.日期選擇器插件
? ? ? ? 因為項目中需要用到日期選擇器，但是這個親媽養的IE5對于input屬性type不支持date，所以我就找一個特別強的日期選擇器插件：日期選擇器，也有點小瑕疵，第一呢就是他只能選擇到年月日，不支持時分秒，所以我自己在后面接了一個input框，讓用戶自己輸入具體時間，做個校驗就行了。還有就是css文件他這邊寫的是在js里面自己引入的，所以要注意一下路徑問題；另附上使用效果：
8.分頁插件
? ? ? ? 分頁插件我用的是：jQuery分頁插件pagination，什么都好，就是樣式需要自己畫，但是也還好，就幾個方塊，功能好用才是王道，也是能夠兼容IE5的，另附上使用效果：
9.彈窗
? ? ? ? 關于彈窗嘞，我找了半個小時左右沒找到符合我要求的插件，所以我自己手寫了一個，附上代碼和效果圖，別忘記引入jQuery了喲！如果有家人們找到類似的能夠兼容到IE5的彈窗插件，評論區交流一下呀
HTML：
<p onclick="openPopup()">打開彈窗</p> <div class="myPopup"><img src="./static/myPopupBg.png" alt="" class="myPopupBg"><div class="myPopupContent"><div class="myPopupContentTitle"><h3 class="cl"><span class="fl">彈窗</span> <img src="./static/close.png" alt="" class="myPopupClose fr" onclick="closePopup()"></h3></div><div class="myPopupContentBody"><div class="myPopupContentBodyContentType cl">需要展現的內容</div></div><div class="myPopupContentFooter"><span onclick="closePopup()">確 定</span></div></div></div>CSS:
<style> .myPopup {position: absolute;_position: absolute;top: 0;bottom: 0;right: 0;left: 0;margin: auto;width: 100%;height: 101%;overflow: hidden;display: none;text-align: center; }.myPopupContent {background-color: #fff;padding: 15px;width: 700px;margin: auto;margin-top: 100px; }.myPopup .myPopupBg {position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: -1; }.myPopupContentTitle h3 {font-size: 16px;line-height: 18px; }.myPopupContentTitle {margin-bottom: 30px;}.myPopupContentTitle span {font-weight: bold;color: #409eff; }.myPopupClose {height: 12px;width: 12px;cursor: pointer; }.myPopupContentFooter {text-align: right;margin-top: 30px; }.myPopupContentFooter span {height: 28px;width: 80px;text-align: center;line-height: 28px;padding: 0 10px;background: #3383FF;box-shadow: 0px 4px 15px 2px rgba(51, 131, 255, 0.2);border-radius: 5px;color: #fff;font-size: 12px;cursor: pointer; }.myPopupContentBody {text-align: left;height: 300px;overflow-y: auto;padding: 0 10px; }.fr {float: right; }.fl {float: left; }.cl:after {content: "";display: block;clear: both;height: 0;overflow: hidden;visibility: hidden; }.cl {zoom: 1; } </style>JS：
function openPopup() {$(".myPopup").css("top", document.body.scrollTop + 'px')$("body").attr("style", "overflow:hidden")$(".myPopup").show();}function closePopup() {$("body").attr("style", "overflow:visible");$(".myPopup").hide();}用到的圖片背景圖以及關閉按鈕，由于IE5不支持透明度屬性，所以自己用ps做了一個半透明的png：
效果圖：
總結
????????好啦，這就是今天小譚要分享的內容了，有可能還有很多IE中我沒遇到的兼容問題，歡迎在評論區一起交流呀，最后，希望沒有IE！
總結
以上是生活随笔為你收集整理的IE兼容/IE5兼容踩过的坑的全部內容，希望文章能夠幫你解決所遇到的問題。
