本文分享下我在項(xiàng)目中積累的IE8+兼容性問題的解決方法。根據(jù)我的實(shí)踐經(jīng)驗(yàn)佩研，如果你在寫HTML/CSS時(shí)候是按照W3C推薦的方式寫的复罐，然后下面的幾點(diǎn)都關(guān)注過政供，那么基本上很大一部分IE8+兼容性問題都OK了（這里的IE8+主要是指IE8霸琴，據(jù)個(gè)人目測椒振，IE9+的渲染效果已經(jīng)非常好了）。
前期準(zhǔn)備
測試IE兼容性必須要在Windows中測沈贝，而且是Win7+杠人，因?yàn)閃inXP最高只支持IE8，IE9就呵呵啦宋下！大部分做Web的童鞋都不是使用Windows做為開發(fā)環(huán)境嗡善，要么是Linux發(fā)行版，要么是Mac OS学歧。怎么辦罩引？一般有2種方法：
開Windows虛擬機(jī)
將開發(fā)環(huán)境暫時(shí)切換到Windows
如果你的機(jī)器足夠快，我推薦前一種方式枝笨。但如果機(jī)器不行袁铐，開虛擬機(jī)就會很卡。
我覺得可以把精力集中在這幾個(gè)瀏覽器上：IETester（IE8-IE9）横浑、360瀏覽器剔桨、搜狗瀏覽器、Chrome徙融。IETester測完了建議再用真實(shí)的IE8洒缀、IE9過一遍，以防萬一欺冀。
DOCTYPE
首先需要確保你的HTML頁面開始部分要有DOCTYPE聲明树绩。DOCTYPE告訴瀏覽器使用什么樣的HTML或XHTML規(guī)范來解析HTML文檔，具體會影響：
對標(biāo)記隐轩、attributes 饺饭、properties的約束規(guī)則
對瀏覽器的渲染模式產(chǎn)生影響，不同的渲染模式會影響到瀏覽器對于CSS 代碼甚至 JavaScript 腳本的解析
DOCTYPE是非常關(guān)鍵的职车，目前的最佳實(shí)踐就是在HTML文檔的首行鍵入：
對于DOCTYPE的具體闡述就不展開了瘫俊，可以參考：《正確使用DOCTYPE》、《CS002: DOCTYPE 與瀏覽器模式分析》悴灵。
使用meta標(biāo)簽調(diào)節(jié)瀏覽器的渲染方式
IE8中有一個(gè)“兼容性視圖”的概念扛芽，當(dāng)初IE8發(fā)布時(shí)，相對于IE6/7已經(jīng)做出了非常大的改進(jìn)称勋，但是很多老站點(diǎn)僅針對IE6/7進(jìn)行了優(yōu)化，使用IE8渲染反而會一團(tuán)糟涯竟。為了照顧這些苦逼的前端工程師赡鲜，IE8加入了“兼容性視圖”功能空厌，這樣的話就可以在IE8中使用IE6或IE7的內(nèi)核渲染頁面。這個(gè)當(dāng)然不是我們想要的银酬，所以需要使用meta標(biāo)簽來強(qiáng)制IE8使用最新的內(nèi)核渲染頁面嘲更，代碼如下：
IE=edge表示強(qiáng)制使用IE最新內(nèi)核，chrome=1表示如果安裝了針對IE6/7/8等版本的瀏覽器插件Google Chrome Frame（可以讓用戶的瀏覽器外觀依然是IE的菜單和界面揩瞪，但用戶在瀏覽網(wǎng)頁時(shí)赋朦，實(shí)際上使用的是Chrome瀏覽器內(nèi)核），那么就用Chrome內(nèi)核來渲染李破。關(guān)于此meta標(biāo)簽的具體說明宠哄，可參見StackOverflow上的精彩回答。
國內(nèi)存在很多雙核瀏覽器比如360瀏覽器嗤攻、搜狗瀏覽器毛嫉，它們是怎么決定某頁面到底使用哪種內(nèi)核渲染？下面引用一段360瀏覽器v6新特性的官方說明：
由于眾所周知的情況妇菱，國內(nèi)的主流瀏覽器都是雙核瀏覽器：基于Webkit內(nèi)核用于常用網(wǎng)站的高速瀏覽承粤。基于IE的內(nèi)核用于兼容網(wǎng)銀闯团、舊版網(wǎng)站辛臊。以360的幾款瀏覽器為例，我們優(yōu)先通過Webkit內(nèi)核渲染主流的網(wǎng)站房交，只有小量的網(wǎng)站通過IE內(nèi)核渲染彻舰，以保證頁面兼容。在過去很長一段時(shí)間里涌萤，我們主要的控制手段是一個(gè)幾百k大小網(wǎng)址庫淹遵，一個(gè)通過長期人工運(yùn)營收集的網(wǎng)址庫。
盡管我們努力通過用戶反饋负溪、代碼標(biāo)簽智能判斷技術(shù)提高瀏覽器的自動(dòng)切核準(zhǔn)確率透揣。但是在很多情況下，我們?nèi)匀粺o法達(dá)到百份百正確川抡。因此辐真，我們新增加了一個(gè)控制手段：內(nèi)核控制Meta標(biāo)簽。只要你在自己的網(wǎng)站里增加一個(gè)Meta標(biāo)簽崖堤，告訴360瀏覽器這個(gè)網(wǎng)址應(yīng)該用哪個(gè)內(nèi)核渲染侍咱，那么360瀏覽器就會在讀取到這個(gè)標(biāo)簽后，立即切換對應(yīng)的內(nèi)核密幔。并將這個(gè)行為應(yīng)用于這個(gè)二級域名下所有網(wǎng)址楔脯。
解決方法360已經(jīng)告訴我們了，通過meta標(biāo)簽的方式建議其使用Webkit胯甩，代碼如下：
我沒有做細(xì)致的調(diào)查昧廷，不知道其他的雙核瀏覽器是否支持此特性堪嫂。
Media Query
IE8似乎無法識別Media Query，所以需要hack一下啦木柬！推薦采用Respond.js解決此問題皆串，具體方法參見它的文檔即可。
實(shí)現(xiàn)CSS3的某些特性
IE8不支持CSS3的很多新特性眉枕，不過我們可以使用一些比較成熟的hack方法恶复，我采用的是CSS3 PIE，它支持的特性有這些：border-radius速挑、box-shadow谤牡、border-image、multiple background images梗摇、linear-gradient等拓哟。
特別注意：請一定閱讀CSS PIE給出的Know Issues。
識別HTML5元素
如果你在前端代碼中使用了HTML5的新標(biāo)簽（nav/footer等）伶授，那么在IE中這些標(biāo)簽可能無法正常顯示断序。
關(guān)于max-width
還有一個(gè)在IE8中經(jīng)常遇到的問題就是max-width，網(wǎng)頁中圖片的尺寸可能比較寬糜烹，我會給它設(shè)置max-width: 100%來限制其寬度最大為父容器的寬度违诗，但是有時(shí)候卻不奏效，慢慢摸索才得知IE解析max-width所遵循的規(guī)則：嚴(yán)格要求直接父元素的寬度是固定的疮蹦。經(jīng)實(shí)驗(yàn)發(fā)現(xiàn)Chrome所遵守的規(guī)則比IE松一些诸迟，所以這個(gè)問題應(yīng)該不歸屬為IE兼容性問題，不過我還是提一下吧愕乎。
placeholder
IE8下不支持HTML5屬性placeholder阵苇，不過為解決此問題的js插件挺多的，比如：jquery-placeholder感论。
last-child
first-child是CSS2的內(nèi)容绅项，但是last-child就不是了，所以IE8不買賬比肄。推薦的做法不是使用last-child快耿，而是給最后一個(gè)元素設(shè)置一個(gè).last的class，然后對此進(jìn)行樣式設(shè)置芳绩，這樣就全部兼容了掀亥。
background-size: cover
如果你想使用background-size: cover設(shè)置全屏背景，很遺憾IE8辦不到...但可以使用IE獨(dú)有的AlphaImageLoader濾鏡來實(shí)現(xiàn)妥色，添加一條如下的CSS樣式：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)
將sizingMethod設(shè)置為scale就OK了搪花。
還沒完，如果你在此背景之上放置了鏈接，那這個(gè)鏈接是無法點(diǎn)擊的撮竿。一般情況下的解決辦法是為鏈接或按鈕添加position:relative使其相對浮動(dòng)丁稀。
filter blur
CSS3中提供支持濾鏡效果的屬性filter，比如支持高斯模糊效果的blur（類似iOS7的效果）：
filter:blur(10px);-webkit-filter:blur(10px);-moz-filter:blur(10px);
IE8對filter: blur(10px)的顯示效果是對HTML元素進(jìn)行小范圍的模糊處理倚聚，這個(gè)效果并不是高斯模糊，要想支持高斯模糊凿可，需要如下設(shè)置：
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
在實(shí)踐中發(fā)現(xiàn)一個(gè)坑就是惑折，所有position: relative的元素都不會生效。
其他的發(fā)現(xiàn)是枯跑，IE9對filter: blur(10px)無效惨驶，而對filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');是針對元素小范圍的模糊效果。
以上就是我在開發(fā)中遇到的IE瀏覽器的兼容性問題敛助。
