1.使用meta標(biāo)簽調(diào)節(jié)瀏覽器的渲染方式磨总，告訴瀏覽器用哪種內(nèi)核渲染，360雙核瀏覽器就是在ie和chrome之間來(lái)回切換,幫我們判斷使用webkit還是chrome弟翘。
使用meta標(biāo)簽來(lái)強(qiáng)制IE8使用最新的內(nèi)核渲染頁(yè)面，代碼如下：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
2.* 瀏覽器兼容問(wèn)題一：塊屬性標(biāo)簽float后，又有橫行的margin情況下萎坷，在IE8顯示margin比設(shè)置的大
問(wèn)題癥狀:常見(jiàn)癥狀是IE8中后面的一塊被頂?shù)较乱恍?br> 解決方案：在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性
3.瀏覽器兼容：圖片默認(rèn)有間距
問(wèn)題癥狀：幾個(gè)img標(biāo)簽放在一起的時(shí)候，有些瀏覽器會(huì)有默認(rèn)的間距哆档，加了問(wèn)題一中提到的通配符也不起作用。
解決方案：使用float屬性為img布局
4.使用meta標(biāo)簽調(diào)節(jié)瀏覽器的渲染方式
IE8中有一個(gè)“兼容性視圖”的概念住闯，當(dāng)初IE8發(fā)布時(shí)瓜浸，相對(duì)于IE6/7已經(jīng)做出了非常大的改進(jìn)，但是很多老站點(diǎn)僅針對(duì)IE6/7進(jìn)行了優(yōu)化，使用IE8渲染反而會(huì)一團(tuán)糟厘线。為了照顧這些苦逼的前端工程師渡讼，IE8加入了“兼容性視圖”功能成箫，這樣的話就可以在IE8中使用IE6或IE7的內(nèi)核渲染頁(yè)面栖榨。這個(gè)當(dāng)然不是我們想要的婴栽，所以需要使用meta標(biāo)簽來(lái)強(qiáng)制IE8使用最新的內(nèi)核渲染頁(yè)面，代碼如下：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
IE=edge表示強(qiáng)制使用IE最新內(nèi)核檬洞，chrome=1表示如果安裝了針對(duì)IE6/7/8等版本的瀏覽器插件Google Chrome Frame（可以讓用戶的瀏覽器外觀依然是IE的菜單和界面，但用戶在瀏覽網(wǎng)頁(yè)時(shí)盅藻，實(shí)際上使用的是Chrome瀏覽器內(nèi)核）假残，那么就用Chrome內(nèi)核來(lái)渲染莹汤。關(guān)于此meta標(biāo)簽的具體說(shuō)明，可參見(jiàn)StackOverflow上的精彩回答。
國(guó)內(nèi)存在很多雙核瀏覽器比如360瀏覽器仅偎、搜狗瀏覽器跨蟹，它們是怎么決定某頁(yè)面到底使用哪種內(nèi)核渲染？下面引用一段360瀏覽器v6新特性的官方說(shuō)明：
由于眾所周知的情況橘沥，國(guó)內(nèi)的主流瀏覽器都是雙核瀏覽器：基于Webkit內(nèi)核用于常用網(wǎng)站的高速瀏覽窗轩。基于IE的內(nèi)核用于兼容網(wǎng)銀座咆、舊版網(wǎng)站痢艺。以360的幾款瀏覽器為例，我們優(yōu)先通過(guò)Webkit內(nèi)核渲染主流的網(wǎng)站介陶，只有小量的網(wǎng)站通過(guò)IE內(nèi)核渲染堤舒，以保證頁(yè)面兼容。在過(guò)去很長(zhǎng)一段時(shí)間里哺呜，我們主要的控制手段是一個(gè)幾百k大小網(wǎng)址庫(kù)舌缤，一個(gè)通過(guò)長(zhǎng)期人工運(yùn)營(yíng)收集的網(wǎng)址庫(kù)。
盡管我們努力通過(guò)用戶反饋某残、代碼標(biāo)簽智能判斷技術(shù)提高瀏覽器的自動(dòng)切核準(zhǔn)確率国撵。但是在很多情況下，我們?nèi)匀粺o(wú)法達(dá)到百份百正確玻墅。因此卸留，我們新增加了一個(gè)控制手段：內(nèi)核控制Meta標(biāo)簽。只要你在自己的網(wǎng)站里增加一個(gè)Meta標(biāo)簽椭豫，告訴360瀏覽器這個(gè)網(wǎng)址應(yīng)該用哪個(gè)內(nèi)核渲染耻瑟，那么360瀏覽器就會(huì)在讀取到這個(gè)標(biāo)簽后旨指，立即切換對(duì)應(yīng)的內(nèi)核。并將這個(gè)行為應(yīng)用于這個(gè)二級(jí)域名下所有網(wǎng)址喳整。
解決方法360已經(jīng)告訴我們了谆构，通過(guò)meta標(biāo)簽的方式建議其使用Webkit，代碼如下：
<meta name="renderer" content="webkit">
5.Media Query
IE8似乎無(wú)法識(shí)別Media Query框都，所以需要hack一下啦搬素！推薦采用Respond.js解決此問(wèn)題
6.識(shí)別HTML5元素
如果你在前端代碼中使用了HTML5的新標(biāo)簽（nav/footer等），那么在IE中這些標(biāo)簽可能無(wú)法正常顯示魏保。我使用html5shiv熬尺，具體使用方法見(jiàn)文檔。
7.關(guān)于max-width
還有一個(gè)在IE8中經(jīng)常遇到的問(wèn)題就是max-width谓罗，網(wǎng)頁(yè)中圖片的尺寸可能比較寬粱哼，我會(huì)給它設(shè)置max-width: 100%來(lái)限制其寬度最大為父容器的寬度，但是有時(shí)候卻不奏效檩咱，慢慢摸索才得知IE解析max-width所遵循的規(guī)則：嚴(yán)格要求直接父元素的寬度是固定的揭措。經(jīng)實(shí)驗(yàn)發(fā)現(xiàn)Chrome所遵守的規(guī)則比IE松一些，所以這個(gè)問(wèn)題應(yīng)該不歸屬為IE兼容性問(wèn)題刻蚯，不過(guò)我還是提一下吧绊含。分享兩個(gè)我遇到的場(chǎng)景：
（1）td中的max-width
如果針對(duì)td中的img元素設(shè)置max-width: 100%，在IE和Firefox你會(huì)發(fā)現(xiàn)不奏效炊汹，而在Chrome中卻是可以的躬充。經(jīng)查詢發(fā)現(xiàn)需要給table設(shè)置table-layout: fixed，對(duì)此屬性的具體解釋見(jiàn)W3School讨便。
（2）嵌套標(biāo)簽中的max-width
如下的HTML結(jié)構(gòu)：
<div class="work-item">
<a href="#" class="work-link">
</a>
</div>
最外層元素.work-item設(shè)置了固定寬度充甚，但是對(duì)img設(shè)置max-width為100%卻無(wú)效，后來(lái)才發(fā)現(xiàn)需要再對(duì)a標(biāo)簽設(shè)置width: 100%器钟，這樣才能使最內(nèi)層的img標(biāo)簽充滿整個(gè)div。
8.background-size: cover
如果你想使用background-size: cover設(shè)置全屏背景妙蔗，很遺憾IE8辦不到...但可以使用IE獨(dú)有的AlphaImageLoader濾鏡來(lái)實(shí)現(xiàn)傲霸，添加一條如下的CSS樣式：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)
將sizingMethod設(shè)置為scale就OK了。
還沒(méi)完眉反，如果你在此背景之上放置了鏈接昙啄，那這個(gè)鏈接是無(wú)法點(diǎn)擊的。一般情況下的解決辦法是為鏈接或按鈕添加position:relative使其相對(duì)浮動(dòng)寸五。
