DOCTYPE
首先需要確保HTML頁面開始部分要有DOCTYPE聲明。DOCTYPE告訴瀏覽器使用什么樣的HTML或XHTML規范來解析HTML文檔，具體會影響：
1.對標記,attributes,properties的約束規則
2.對瀏覽器的渲染模式產生影響，不同的渲染模式會影響到瀏覽器對於CSS代碼甚至JavaScript腳本的解析
DOCTYPE是非常關鍵的，目前的最佳時間就是在HTML文檔的首行鍵入
<!DOCTYPE html>
使用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內核來渲染。
國內存在很多雙內核瀏覽器比如360瀏覽器，搜狗瀏覽器，他們是怎么決定某頁面到底使用哪種內核渲染？下面引用一段360瀏覽器v6新特性的官方說明
"由於眾所周知的情況，國內的主流瀏覽器都是雙核瀏覽器：基於Webkit內核用於常用網站的高速瀏覽。基於IE的內核用於兼容網銀、舊版網站。以360的幾款瀏覽器為例，我們優先通過Webkit內核渲染主流的網站，只有小量的網站通過IE內核渲染，以保證頁面兼容。在過去很長一段時間里，我們主要的控制手段是一個幾百k大小網址庫，一個通過長期人工運營收集的網址庫。
盡管我們努力通過用戶反饋、代碼標簽智能判斷技術提高瀏覽器的自動切核准確率。但是在很多情況下，我們仍然無法達到百份百正確。因此，我們新增加了一個控制手段：內核控制Meta標簽。只要你在自己的網站里增加一個Meta標簽，告訴360瀏覽器這個網址應該用哪個內核渲染，那么360瀏覽器就會在讀取到這個標簽后，立即切換對應的內核。並將這個行為應用於這個二級域名下所有網址。"
解決方法360已經告訴我們通過meta標簽的方式建議其使用Webkit，代碼如下：
<meta name="renderer" content="webkit">
Media Query
IE8似乎無法識別Media Query，所以需要hack一下。
實現CSS3的某些新特性
IE8不支持CSS3的很多新特性，不過我們可以使用一些比較成熟的hack方法，我采用的是CSS3 PIE,他支持的特性有這些：
border-radius , box-shadow , border-image , multiple background images , linear-gradient 等
特別注意：請一定閱讀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中卻是可以的，經查詢發現不奏效，而在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
last-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使其相對浮動
filter blur
CSS3中提供支持濾鏡效果的屬性filter，比如支持高斯模糊效果的blur
filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px);
IE8對filter:blur（10px）的顯示效果是對HTML元素進行小范圍的模糊處理，這個效果並不是高斯模糊，要想支持高斯模糊，需要設置
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
在實踐中發現一個坑就是，所有position:relative的元素都不會生效
其他的發現是，IE9對filter:blur（10px）無效，而對filter:progid:DXImageTransform.Mucrosoft.Blur(PixelRadius='10');是針對元素小范圍模糊的模糊效果