IE8+兼容經驗小結
January 15, 2014
最近一段時間，我都使用Flask+Bootstrap3的框架組合進行開發。本文就是在這種技術組合下，分享IE8+兼容性問題的解決方法。根據我的實踐經驗，如果你在寫HTML/CSS時候是按照W3C推薦的方式寫的，然后下面的幾點都關注過，那么基本上很大一部分IE8+兼容性問題都OK了（這里的IE8+主要是指IE8，據個人目測，IE9+的渲染效果已經非常好了）。
前期准備
測試IE兼容性必須要在Windows中測，而且是Win7+，因為WinXP最高只支持IE8，IE9就呵呵啦！大部分做Web的童鞋都不是使用Windows做為開發環境，要么是Linux發行版，要么是Mac OS。怎么辦？一般有2種方法：
- 開Windows虛擬機
- 將開發環境暫時切換到Windows
如果你的機器足夠快，我推薦前一種方式。但我之前是在二手電腦上開發的，開虛擬機簡直卡出翔了，所以采用了第二種方法。如果你是Pythoner，我之前寫的一篇日志《在Windows中搭建Python Web開發環境》可能會對你有點用處。
然后需要在Win7里安裝用於測試的瀏覽器，查了下百度給出的最近一個月瀏覽器份額，也不知道准不准哈：
我覺得需要測的大概有：IE11、IETester（IE8-IE9）、360瀏覽器、搜狗瀏覽器、Chrome、Firefox、Safari for Windows。IETester測完了建議再用真實的IE8、IE9測一遍，以防萬一。Safari最好還是找蘋果設備實測。
DOCTYPE
首先需要確保你的HTML頁面開始部分要有DOCTYPE聲明。DOCTYPE告訴瀏覽器使用什么樣的HTML或XHTML規范來解析HTML文檔，具體會影響：
- 對標記、attributes 、properties的約束規則
- 對瀏覽器的渲染模式產生影響，不同的渲染模式會影響到瀏覽器對於CSS 代碼甚至 JavaScript 腳本的解析
DOCTYPE是非常關鍵的，目前的最佳實踐就是在HTML文檔的首行鍵入：
<!DOCTYPE html>
對於DOCTYPE的具體闡述就不展開了，可以參考：《正確使用DOCTYPE》、《CS002: DOCTYPE 與瀏覽器模式分析》。
使用meta標簽調節瀏覽器的渲染方式
IE8中有一個“兼容性視圖”的概念，當初IE8發布時，相對於IE6/7已經做出了非常大的改進，但是很多老站點僅針對IE6/7進行了優化，使用IE8渲染反而會一團糟。為了照顧這些苦逼的前端工程師，IE8加入了“兼容性視圖”功能，這樣的話就可以在IE8中使用IE6或IE7的內核渲染頁面。這個當然不是我們想要的，所以需要使用meta標簽來強制IE8使用最新的內核渲染頁面，代碼如下：
<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