記錄一下逼瘋我的IE8相容性調整
IE8不相容的東西一籮筐：
css3的calc()、rgba()...
IE8能用的東西：
css3的box-sizing、min-**、max-**
1、不相容calc():
改佈局吧小夥伴！
2、不相容rgba():
使用了：
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);
其中#後面兩位是透明度：
3、不相容box-shadow：
使用：
/*Internet Explorer*/
background:#fff;
/*Internet Explorer 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=0,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=90,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=180,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=270,strength=6)";
/*低於Internet Explorer 版本8*/
*filter: progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=0, strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=90, strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC direction=180, strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=270, strength=6);
/*標準瀏覽器*/
box-shadow:0px0px6px#CCC;
Shadow濾鏡必須配合background屬性一起使用，否則該濾鏡失效
在IE8中，-ms-filter是filter的別名，兩者區別是-ms-filter的屬相值必須被單引號或雙引號包圍，而filter中則不是必須，而在IE8之前的版本中，filter的屬性值必須不被單引號或雙引號包圍。
Shadow濾鏡的基本語法：
filter:Shadow(Color=color,Direction=direction,strength=strength)
color代表投影的底色，該數值是用英文字母來代替的， 例如投影底色是藍色的話，就應該設定color=blue。
direction引數是用來設定投影方向的，如果該數值是0的話，就代表垂直投影，此外該數值45度為單位，它的預設值是向左的270度。
strength設定或檢索以物件為基準的在運動方向上的向外擴散距離。
box-shadow的基本語法：
box-shadow:<length><length><length>||<color>
box-shadow:X軸位移 Y軸位移 陰影大小 陰影顏色
在低於Firefox4、Chrome10的瀏覽器中實現陰影效果需要新增：
-moz-box-shadow: 0px 0px 6px #CCC;
-webkit-box-shadow: 0px 0px6px #CCC;
4、不相容placeholder
使用js外掛：jquery.placeholder.js
https://github.com/mathiasbynens/jquery-placeholder
5、不相容html5標籤和css3的一些屬性
使用js外掛如下——
（1）html5shiv.js、html5media.js
（2）respond.js
（3）modernizr（一款相容css3、html5等元素的外掛）
6、本地視訊不能播放：
在此路徑：C:\Windows\SysWOW64\Macromed\Flash\flashPlayerTrust
之下新增 trustpath.txt 檔案，內容如下：
c:\
d:\
e:\
（有幾個盤就寫幾個即可）
7、不相容text-overflow
首先平時用的時候要配合使用
複製程式碼程式碼如下:
overflow: hidden;
white-space: nowrap;
這兩個屬性讓起溢位隱藏和不換行,然後IE8用的時候記得不要加
複製程式碼程式碼如下:
word-berak:break-all;
word-wrap:break-word;
這樣斷開了,在IE8裡面是不會變成省略號的(但是在IE6/7/FF/Chrome都沒有問題),其實都單行省略了,本來也沒有必要斷詞
所以一般標準組合就是:
複製程式碼程式碼如下:
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis; /* for Opera */
text-overflow: ellipsis; /* for IE */
基本通殺所有瀏覽器了
最後像<a>這類預設非塊的元素,要加上display:block;才有效果，還有別忘了width或者max-width。
8、不相容background-size
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
enabled：可選項。布林值(Boolean)。設定或檢索濾鏡是否啟用。 true：預設值。濾鏡啟用。 false：濾鏡被禁止。
sizingMethod：可選項。字串(String)。設定或檢索濾鏡作用的物件的圖片在物件容器邊界內的顯示方式。 crop：剪下圖片以適應物件尺寸。 image：預設值。增大或減小物件的尺寸邊界以適應圖片的尺寸。 scale：縮放圖片以適應物件的尺寸邊界。
src：必選項。字串(String)。使用絕對或相對 url 地址指定背景影象。假如忽略此引數，濾鏡將不會作用。
9、不相容line-height
line-height:32px;
line-height: 32px\9; /*IE8*/
*line-height: 32px; /* IE7支援 */
_line-height: 32px; /* IE6支援 */
-ms-line-height: 32px;/*IE9+支援*/
-webkit-line-height:32px; /*chrome safair*/
-moz-line-height: 32px;/*火狐*/
10、不相容transform
使用filter的Matrix（矩陣）
11、不相容border-radius
只能使用圖片代替了（整體背景圖或者四個弧角的背景圖）
12、echarts
使用echarts第二版能相容ie8，而第三版會提示更新瀏覽器。
13、視訊播放器
使用的是jplayer外掛
14、使用react作為開發框架時：
https://blog.csdn.net/zjw0742/article/details/52981706
https://github.com/GarveyZuo/React-router-redux-IE8/
（雖然本人很習慣用vue，怎奈何，vue不能相容ie8。。。）
----------------------------------------------續更分割線-------------------------------------------------