IE8的相關兼容

最近接觸PC端，網站出來以後項目經理B君才說要作IE8的兼容（一臉懵逼）
最痛苦的是dom不能隨意修改，由於css複用的地方太多了，極可能會牽一髮動全身，因此只能在css和js上面動手。

---

CSS3選擇器、HTML五、BootStrap響應式對應連接

<script src="https://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>

關鍵：

1. 本地模式(ftp)下沒法起做用，能夠用node搭建個本地服務器瀏覽

border-radius or box-shadow

.compatible{
    border-radius:5px;
    box-shadow:5px 5px 5px #000;
    behavior:url(/resource/js/pie/PIE.htc);
    position:relative;
    z-index:5;
}

關鍵：

1. 下載pie.htc

2. behavior的url地址爲相對於地址欄的絕對地址，而不是所在css文件的相對地址

3. 如果box-shadow，色值需使用編碼(以下，grey is not working)

4. box-shadow不支持insert

5. github上說要有position:relative，不過我發現不寫或者position:absolute也是能夠的

box-shadow:5px 5px 5px grey;

opacity

.compatible{
    filter:alpha(opacity=50);
}

關鍵：

1. 數字爲百分比

background-size

.compatible{
    background-size:cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/resource/images/icon.png', sizingMethod='scale')
}

關鍵：

1. 無需再加background-image

2. src裏面一樣是絕對地址

transform

.compatible{
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=-1,
            M12=1.2246467991473532e-16,
            M21=-1.2246467991473532e-16,
            M22=-1,
            SizingMethod='auto expand');
}

關鍵：

1. 只要你會copy代碼：ie兼容transform

2. 不支持matrix3d，如translateZ,rotateX

5.22更新

找到一個很全面的關於兼容解決方案的地址：HTML5 Cross Browser Polyfills