IE8的兼容性問題

IE的兼容性問題是前端開發人員的老大難問題，不過隨着時代的發展，IE6逐漸的被淘汰，如今以及不多有網站兼容IE6了，通常都兼容到IE8，如今我總結了一些IE8的兼容性問題及解決方法。

1.使用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內核來渲染。

2.實現css3的某些特性

IE8不支持CSS3的不少新特性，不過咱們可使用一些比較成熟的hack方法，我採用的是CSS3 PIE，它支持的特性有這些：border-radius、box-shadow、border-image、multiple background images、linear-gradient等。

3.識別html5元素

若是你在前端代碼中使用了HTML5的新標籤（nav/footer等），那麼在IE中這些標籤可能沒法正常顯示。我使用html5shiv，具體使用方法見文檔。

4.關於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>

　　

最外層元素設置了固定寬度，可是對img設置max-width爲100%卻無效，後來才發現須要再對a標籤設置，這樣才能使最內層的img標籤充滿整個div。

.work-itemwidth: 100%

5.嵌套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實現水平佈局。

6.placeholder

IE8下不支持HTML5屬性placeholder，不過爲解決此問題的js插件挺多的，好比：jquery-placeholder。

7.img標籤上下有3px的留白

解決辦法： 1.給元素加font-size: 0 ;

               2.給img標籤加float: left;

8.png24的圖片格式有背景圖

將圖片的格式改成png8的格式