兼容IE8遇到的問題

基於bootstrap2的兼容IE8工程講解

須要的外部庫：jquery1.8、font-awesome4.2、bootstrap2.3.2、html5.js、respond.js、ie-css3.htc

jquery版本在1.9以上不支持ie8，html5.js是聲明頁面採用HTML5標準，respond.js讓頁面支持媒體查詢，ie-css3.htc爲css3中某些屬性的兼容。

注意事項：

頁面頭部

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/> //頁面寬度設定爲容器寬度 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
    <meta charset="utf-8">

css規範

background屬性

background:#f7fbff url(background.png) 0 0 no-repeat; //注意空格

目前引入的兼容存在的問題：

1. display:inline-block;無效改用display:inline

2. input等表單項樣式重寫需border:none;再設定需求的border樣式而後加上
   behavior:url(ie-css3.htc) 其中ie-css3.htc爲絕對路徑。

ie-css3.htc詳解

.htc是個腳本文件，自己和js是同一類型。IE只認可的文件格式是.htc，用來描述web行爲，容許程序員把自定義功能鏈接到現有的元素和控件，而不是經過下載二進制文件（例如ActiveX控件）來完成這個功能。

侷限性：

1. 當前元素必定要有定位屬性（position:relative或position:absolute）

2. z-index值必定要比周圍元素高

支持的內容：

1. border-radius 四個角設置圓角屬性（只設置一個角無效）

2. box-shadow 陰影的參數box-shadow: 5px 3px 5px #000;（不支持除了#000以外的顏色）

3. text-shadow IE下的表現與Firefox/Safari/Chrome有一點點的差別