好久沒有寫博客了，因爲最近公司項目要調ie8兼容，一直在忙這事，終於竣工了，跟大家分享下這老掉牙的瀏覽器是如何搞定的。。。歡迎大家指教
項目是使用的jeecg框架，後臺使用的java,前端頁面使用了bootStrap,jquery,easyui框架，頁面是jsp+less+js，還用到了好多html5的新標記以及CSS3的新屬性以及媒體查詢。由於當時做項目時沒有考慮ie8，所以改的過程中遇到了好多好多問題。剛拿到項目時谷歌運行沒有問題，ie8一片慘白，不光沒有樣式，連字都沒有。。。沒有最慘只有更慘。不說廢話了，上乾貨
1.jquery
項目之前所用的jquery爲2.1.4版本，不兼容ie8(jquery2.0+都不兼容ie8)，將所有頁面jquery均換成1.10.2版本。
2.bootstrap
項目所使用的bootstrap是3.3.4版本的，爲了兼容ie8做了如下設置
a.將jsp頁面加上了<!DOCTYPE html>
b.設置元標籤
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
c.使用reponse.js使得支持媒體查詢
d.使用html5shiv.min.js使ie8支持html5新特性，注意：使用這個js後所有的html5新結構標記均變爲行內元素，需要手動設置display:block;
這樣設置後不僅支持了bootstrap還使得ie8兼容html5和媒體查詢。
3.less
之前使用的less是直接引入的less文件，並且引入less.js進行編譯。但是less.js在ie8不能用，會報錯。所以還是穩妥點，直接使用的css文件。我是通過在線less轉css編譯器轉的。
這樣基本樣式就差不多都出來了。
4.iframe
這個iframe之前給的height是百分比，但是ie8不支持iframe的高爲百分比的寫法。網上推薦了好多js設置高度的方法，我閒麻煩，寫了個CSS,解決了這個問題
iframe {
width: 100%;
height:100%;
display: block;
position: absolute;
}
5.彈性佈局問題
由於之前沒有考慮ie8，使用了大量的彈性佈局，這回可慘了，沒有簡單辦法，只能重寫。
彈性佈局新老版本共三種，最新的display:flex;兼容ie 10+；過渡版本和老版本(box)都不兼容ie8.。。所以放棄吧，重新寫佈局好了。雖然彈性佈局好用，但做項目一定要慎用flex
6.做項目遇見的最大的坑，這個坑不願別人，自己挖的自己跳。<哭泣>
所有的都設置好了，頁面就只有一小條，找了好久才找到問題。之前寫代碼馬虎，<nav>少些了一半。智能偉大的谷歌沒問題，到ie8這就慘了，就是不顯示。找了好久，所以，寫代碼一定要認真些啦。
7.CSS3
CSS3的新屬性和新選擇器ie8是不支持的，解決辦法換選擇器唄，不行就給個id/class啥的，新屬性不支持查資料說是引入PIE.htc的一個包，這個包有坑，我就沒有使用。能用濾鏡的就用的濾鏡。用不了的就選擇優雅降級啦。
8.CSS hack
還有最有一點，就是一定不要修改原文件代碼，將所有新的需要給ie單獨寫的代碼寫到新文件中，然後通過頭部註釋引用
<!--[if lte IE 8]>
<![endif]-->
用到的差不多就這麼多了，想到了我會繼續補充的。
