最近一段時間，我都使用Flask+Bootstrap3的框架組合進行開發。本文就是在這種技術組合下，分享IE8+兼容性問題的解決方法。根據個人實踐經驗，若是你在寫HTML/CSS時候是按照W3C推薦的方式寫的，而後下面的幾點都關注過，那麼基本上很大一部分IE8+兼容性問題都OK了（這裏的IE8+主要是指IE8，據我的目測，IE9+的渲染效果已經很是好了）。html
前期準備
測試IE兼容性必需要在Windows中測，並且是Win7+，由於WinXP最高只支持IE8，IE9就呵呵啦！大部分作Web的童鞋都不是使用Windows作爲開發環境，要麼是Linux發行版，要麼是Mac OS。怎麼辦？通常有2種方法：前端
- 開Windows虛擬機
- 將開發環境暫時切換到Windows
若是你的機器足夠快，我推薦前一種方式。但我以前是在二手電腦上開發的，開虛擬機簡直卡出翔了，因此採用了第二種方法。若是你是Pythoner，我以前寫的一篇日誌《在Windows中搭建Python Web開發環境》可能會對你有點用處。html5
而後須要在Win7裏安裝用於測試的瀏覽器，查了下百度給出的最近一個月瀏覽器份額，也不知道準不許哈：python
我以爲須要測的大概有：IE十一、IETester（IE8-IE9）、360瀏覽器、搜狗瀏覽器、Chrome、Firefox、Safari for Windows。IETester測完了建議再用真實的IE八、IE9測一遍，以防萬一。Safari最好仍是找蘋果設備實測。jquery
DOCTYPE
首先須要確保你的HTML頁面開始部分要有DOCTYPE聲明。DOCTYPE告訴瀏覽器使用什麼樣的HTML或XHTML規範來解析HTML文檔，具體會影響：css3
- 對標記、attributes 、properties的約束規則
- 對瀏覽器的渲染模式產生影響，不一樣的渲染模式會影響到瀏覽器對於CSS 代碼甚至 JavaScript 腳本的解析
DOCTYPE是很是關鍵的，目前的最佳實踐就是在HTML文檔的首行鍵入：nginx
<!DOCTYPE html>
對於DOCTYPE的具體闡述就不展開了，能夠參考：《正確使用DOCTYPE》、《CS002: DOCTYPE 與瀏覽器模式分析》。git
使用meta標籤調節瀏覽器的渲染方式
IE8中有一個「兼容性視圖」的概念，當初IE8發佈時，相對於IE6/7已經作出了很是大的改進，可是不少老站點僅針對IE6/7進行了優化，使用IE8渲染反而會一團糟。爲了照顧這些苦逼的前端工程師，IE8加入了「兼容性視圖」功能，這樣的話就能夠在IE8中使用IE6或IE7的內核渲染頁面。這個固然不是咱們想要的，因此須要使用meta標籤來強制IE8使用最新的內核渲染頁面，代碼以下：github
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
IE=edge表示強制使用IE最新內核，chrome=1表示若是安裝了針對IE6/7/8等版本的瀏覽器插件Google Chrome Frame（可讓用戶的瀏覽器外觀依然是IE的菜單和界面，但用戶在瀏覽網頁時，實際上使用的是Chrome瀏覽器內核），那麼就用Chrome內核來渲染。關於此meta標籤的具體說明，可參見StackOverflow上的精彩回答。
國內存在不少雙核瀏覽器好比360瀏覽器、搜狗瀏覽器，它們是怎麼決定某頁面到底使用哪一種內核渲染？下面引用一段360瀏覽器v6新特性的官方說明：
因爲衆所周知的狀況，國內的主流瀏覽器都是雙核瀏覽器：基於Webkit內核用於經常使用網站的高速瀏覽。基於IE的內核用於兼容網銀、舊版網站。以360的幾款瀏覽器爲例，咱們優先經過Webkit內核渲染主流的網站，只有小量的網站經過IE內核渲染，以保證頁面兼容。在過去很長一段時間裏，咱們主要的控制手段是一個幾百k大小網址庫，一個經過長期人工運營收集的網址庫。
儘管咱們努力經過用戶反饋、代碼標籤智能判斷技術提升瀏覽器的自動切覈准確率。可是在不少狀況下，咱們仍然沒法達到百份百正確。所以，咱們新增長了一個控制手段：內核控制Meta標籤。只要你在本身的網站裏增長一個Meta標籤，告訴360瀏覽器這個網址應該用哪一個內核渲染，那麼360瀏覽器就會在讀取到這個標籤後，當即切換對應的內核。並將這個行爲應用於這個二級域名下全部網址。
解決方法360已經告訴咱們了，經過meta標籤的方式建議其使用Webkit，代碼以下：
<meta name="renderer" content="webkit">
我沒有作細緻的調查，不知道其餘的雙核瀏覽器是否支持此特性。
Media Query
Bootstrap3中使用了大量的Media Query特性，可是IE8彷佛沒法識別，因此須要hack一下啦！Bootstrap3的官方文檔中已經針對瀏覽器兼容性作了比較詳細的說明，推薦採用Respond.js解決此問題，具體方法參見它的文檔便可。
有一個地方須要注意的是，若是對Bootstrap3 media query聲明的屬性（好比.container）進行覆蓋，那在不支持media query的瀏覽器中Respond.js起做用後，會把你的覆蓋樣式再次覆蓋。個人解決方案是在後面加上!important。
實現CSS3的某些特性
IE8不支持CSS3的不少新特性，不過咱們可使用一些比較成熟的hack方法，我採用的是CSS3 PIE，它支持的特性有這些：border-radius、box-shadow、border-image、multiple background images、linear-gradient等。
官方文檔給出了2種使用方式，一種是引入.htc文件，另外一種則是使用PIE.js。若是使用第一種方法（官方推薦），那麼須要設置.htc文件的Content-Type爲text/x-component。這個也好辦，若是你是經過nginx來託管此文件，只要在Nginx的配置文件中加入一條MIME規則便可。我建議使用Flask來託管它（放在static文件夾中），這樣更方便，而後只需加入下面的代碼：
import mimetypes mimetypes.add_type('text/x-component', '.htc')
特別注意：請必定閱讀CSS PIE給出的Know Issues。
識別HTML5元素
若是你在前端代碼中使用了HTML5的新標籤（nav/footer等），那麼在IE中這些標籤可能沒法正常顯示。我使用html5shiv，具體使用方法見文檔。
關於max-width
還有一個在IE8中常常遇到的問題就是max-width，網頁中圖片的尺寸可能比較寬，我會給它設置max-width: 100%來限制其寬度最大爲父容器的寬度，可是有時候卻不奏效，慢慢摸索才得知IE解析max-width所遵循的規則：嚴格要求直接父元素的寬度是固定的。經實驗發現Chrome所遵照的規則比IE鬆一些，因此這個問題應該不歸屬爲IE兼容性問題，不過我仍是提一下吧。分享兩個我遇到的場景：
（1）td中的max-width
若是針對td中的img元素設置max-width: 100%，在IE和Firefox你會發現不奏效，而在Chrome中倒是能夠的。經查詢發現須要給table設置table-layout: fixed，對此屬性的具體解釋見W3School。
（2）嵌套標籤中的max-width
以下的HTML結構：
<div class="work-item"> <a href="#" class="work-link"> <img src="sample.jpg" class="work-image img-responsive"> </a> </div>
最外層元素.work-item設置了固定寬度，可是對img設置max-width爲100%卻無效，後來才發現須要再對a標籤設置width: 100%，這樣才能使最內層的img標籤充滿整個div。
嵌套inline-block下padding元素重疊
HTML代碼：
<ul>
<li><a>1</a></li> <li><a>2</a></li> <li><a>3</a></li> </ul>
CSS代碼：
ul li{ display: inline-block; } ul li a{ display: inline-block; padding: 10px 15px; }
按理來講a標籤之間的距離應該是30px，但在IE8中出現了重疊，只有15px。這裏和這裏也提到了一樣的問題。個人解決方法是使用float: left替代display: inline-block實現水平佈局。
placeholder
IE8下不支持HTML5屬性placeholder，不過爲解決此問題的js插件挺多的，好比：jquery-placeholder。
last-child
first-child是CSS2的內容，可是last-child就不是了，因此IE8不買帳。推薦的作法不是使用last-child，而是給最後一個元素設置一個.last的class，而後對此進行樣式設置，這樣就所有兼容了。
background-size: cover
若是你想使用background-size: cover設置全屏背景，很遺憾IE8辦不到...但可使用IE獨有的AlphaImageLoader濾鏡來實現，添加一條以下的CSS樣式：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)
將sizingMethod設置爲scale就OK了。
還沒完，若是你在此背景之上放置了連接，那這個連接是沒法點擊的。通常狀況下的解決辦法是爲連接或按鈕添加position:relative使其相對浮動。
好了，目前來講我所遇到的IE8+兼容性問題就這些啦。前端和後端我都作一點，這樣的好處在於一我的可以獨立開發網站，壞處就是各方面都不精。若是你有蠻重要的補充，或者更好的解決方法，歡迎告訴我！
PS: 最近作了些IE7兼容方面的工做，相關的經驗見IE7+兼容。
原文：http://hustlzp.com/post/2014/01/ie8-compatibility