前端兼容ie開發的注意事項

因爲工做緣由，項目大多須要作到兼容ie9或者8的狀況，我也很無奈，因此就記錄一些工做中本身遇到，或者帶的實習生弟弟們遇到的一些問題

html部分

問題：Ie9僅支持h5的部分標籤，以及某些標籤的部分屬性，ie8之前我估摸着是全軍覆沒（弱弱的說一聲我是估計哈）

解決：

1.不過在現在已經有成熟得解決方案了html5shim htmlshiv 你只須要引入這個js就能兼容大部分h5得標籤了，你能夠理解爲人家用js createElenment的方式建立的footer header等看起來像h5的標籤，這種方式能讓你在ie678裏使用h5的新標籤，無非是一種輸入習慣罷了

2.在項目中多看看meta標籤的使用，尤爲是一些meta標籤是能夠優先定義瀏覽器版本，內核（www.cnblogs.com/wangyang108…

問題：input標籤的placeholder在ie9更低版本不顯示問題

解決：網上有不少解決方案，大體就是用js去模擬，參考個人另一篇文章，placeholder的折騰

問題：input標籤後面自帶一個X問題

解決：css能夠解決的方案，自行百度

css部分

注意事項：佈局方案來講，flex確定會排除掉，即便ie10,11對flex的兼容性也不會特別友好，針對ie9我建議的佈局方案是=>定位position佈局，浮動float，table佈局 其餘樣式，相似於transtion等動畫，css3之後的屬性也存在兼容性問題，因此產品經理跟你提的時候必定要冷靜啊，不要給本身那麼多996的但願

js部分

問題：console.log問題，ie8/ie9,常常有同事遇到打開F12才能運行

解決：清除console

問題：es6的語法

解決：尤爲當你沒有使用構建工具工程化前端項目的時候，更要注意js語法的規範性，這裏建議打開本身編輯器的校驗規則，固然若是你使用構建工具gulp,webpack能規避大部分的問題，藉助一些轉義babel等全局編譯新的語法爲es5的語法

針對平常須要兼容ie8 9開發的一些建議

1.UI庫選擇，在開發項目的時候我建議的是儘可能使用別人作好兼容的框架，ui方面若是你的項目jq爲主強烈建議layui（兼容ie8的ui庫）,easyui（一款嚴重被低估了的ui庫，目前已經支持jq,vue,angula,react，而且性能很好，尤爲在使用表格大數據渲染方面至關出色，採用虛擬滾動視圖，渲染海量數據）

2.上傳，ie9及Ie9如下目前的上傳問題，ie9及如下不支持FileReader和formdata.（建議使用webupload上傳插件，聽說兼容ie6+）,還有一些其餘flash上傳的插件兼容性都比較好uploadify，SWFUpload等等，使用方式相似webupload，因此爲何不選擇百度的呢。

3.下載，最好是window.open，人類使用的瀏覽器基本無兼容問題，若是你運氣很差，後端偏要你使用post方式下載，這裏建議ajax配合download.js（一款開源的下載方案）

4.編碼問題，某些實習生同窗邏輯不太好就會寫不少for循環嵌套什麼的，也不是很差，你不出bug你們都開心，你一出bug讓別人看的時候真的想捶死你，最恐怖的是ajax裏面嵌套ajax，我遇到過嵌套6個ajax的小可愛，建議開發的時候使用es6的那些新語法，簡單清晰明瞭，怕兼容問題你能夠用lodashjs這些開源的函數式編程庫，真的很簡單**********固然這裏的建議是給你一塊兒作項目都是實習生的同窗們

5.項目構建技術棧選擇，切記開發前確認瀏覽器兼容的最低版本要求，根據反饋選擇合適的前端技術棧，ie8及如下的建議使用jq+gulp工做流構建前端項目

6.固然兼容性問題不少，也很煩，因此最關鍵的仍是自測，目前我發現大部分在線上遇到的問題其實本地也會遇到（想打死他，別攔我），尤爲團隊沒有專業的測試，更須要作好自測功能，尤爲spa項目，打包後放nginx運行一下是開發的基本操做。

這也算是閒下來隨便寫點隨筆，不扯了，我又要去給我帶的實習生們改bug了