前言

最近在做一個專案，要求是相容IE8，還要相容1280螢幕解析度，寫頁面其實還好，就是這個IE8賊噁心，用到的很多css屬性IE8都不相容，想要的效果也呈現不出來。先來說一說我遇到的IE8不支援的哪些css屬性吧

1，background不支援連寫

background:url(../img/background.png) no-repeat -580px 0/auto 100%; */

這段程式碼在谷歌瀏覽器上顯示正常，在ie8上就有問題，需要分開寫

background: url(/portal/themes/boss/login/imgs/background.jpg) center;
    background-repeat: no-repeat;
    background-position-x:-580px;
    background-position-y:0;
    -o-background-size: auto 100%;
    background-size: auto 100%; 
    /* 相容background-size */
    -ms-behavior: url(/portal/themes/boss/login/css/backgroundsize.min.htc);
    behavior: url(/portal/themes/boss/login/css/backgroundsize.min.htc);
 

這裡需要注意的是需要下載一個字尾名兒是.htc的一個檔案，用來相容ie8的background-size，使背景圖正常顯示；路徑一定要是絕對路徑才可以；

2， border-radius 圓角

圓角在ie8下也是不支援的，需要下載一個檔案PIE.htc，親測有效，程式碼如下：

border-radius: 25px;
/*相容圓角*/
-ms-behavior:url(/portal/themes/boss/login/css/PIE.htc);
behavior: url(/portal/themes/boss/login/css/PIE.htc);

做網頁的時候免不了要用到圓角，一提到要相容IE8，簡直要瘋掉，，注意：路徑一定要這麼寫，不能只寫一個檔名兒，否則不生效；

3，box-shadow 盒子陰影

這個也是ie8不支援的一個css3新特性，也是用pie.htc這個檔案就ok

4，CSS3 Background 背景漸變

直接上程式碼把這個漸變，沒什麼好說的，一行程式碼解決ie8漸變色問題；

background: -o-linear-gradient(#56c4ff,#0084ff);

background:linear-gradient(#56c4ff,#0084ff);
/*相容背景漸變*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#56c4ff',endColorstr='#0084ff',grandientType=1);
 

5，HTML5

• 非常遺憾，HTML5 新增的標籤在 IE8 裡是不受支援，例如：section / main / header / footer等。
  • 解決方案：html5shiv，這個指令碼可以實現相容 IE8 

6，媒體查詢media

在相容解析度的時候基本上都會用到媒體查詢，，然鵝，千辛萬苦寫好的media，IE8這個祖宗竟然不識別，寫到這裡我的心情就不美麗了，哎，還是來說說怎麼解決吧。

下載一個respond.min.js,直接百度就好，然後引入到你要相容的條件註釋裡面，我的是在ie8和ie9

需要用到條件註釋，程式碼如下

<!-- 如果不是ie，用gzpt_login.css -->
<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/portal/themes/boss/login/css/gzpt_login.css" />
<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/portal/themes/boss/login/css/gzpt_login.css" />
<![endif]-->
<!--[if lte IE 11]>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/portal/themes/boss/login/css/gzpt_login.css" />
<![endif]-->
<!--[if lte IE 10]>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/portal/themes/boss/login/css/gzpt_login.css" />
<![endif]-->
<!-- <link rel="stylesheet" type="text/css" href="<%=basePath%>/portal/themes/boss/login/css/gzpt_login.css" /> -->
<!--[if lte IE 9]>  
<link rel="stylesheet" type="text/css" href="<%=basePath%>/portal/themes/boss/login/css/gzpt_loginie8.css" />
<script type="text/javascript" src="<%=basePath%>/portal/themes/boss/login/js/respond.min.js"></script>
<![endif]-–>  

再有一點需要注意的是，媒體查詢在IE8裡面使用要格外注意，不能簡寫，否則不生效，IE8對程式碼是很嚴格的

總結：

       IE8對我們開發人員來說，簡直就是要瘋，最討厭的就是處理ie8相容問題了，雖然頭疼了好幾天，但是，這些問題最終還是解決了，也學到了不少東西，總之多學一些東西還是很不錯的，加油吧！