IE之不徹底罪狀（持續更新）

開始以前先說點題外話。 如國內瀏覽器特別多，並且都是包殼。這些瀏覽器通常來說爲了保證瀏覽器兼容性都會默認使用webkit內核進行渲染，再特殊狀況使用ie內核。   用過一些這樣的瀏覽器都知道它是由急速模式和兼容模式，這就是在切換模式。若是你的項目中必需要使用webkit  或者ie10 etc內核渲染，那麼能夠加meta標籤告訴瀏覽器，強制瀏覽器選擇合適的渲染模式。看起來是這樣的：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

一 JS

1. XMLHttpRequest

IE8的   XMLHttpRequest的對象大概是這樣的

谷歌是這樣的

他們其實有必定的差異的。  好比你使用了 xhr.response  。  毫無疑問就會報錯 。 IE10+ 追加了這個屬性

2.console

你們知道ie 10+ 是有console的。  對於以前的版本是沒有console的。 要想使用大概要這樣子：

  <!--[if lt IE 10]>
    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
    <![endif]-->

這個是阿里的console-polyfill 。

3. socket

ie8 不支持 socket 。

4. 鍵盤監聽

好比要實現監聽回車而後提交

代碼大概是這樣的：

那麼不出所料。  ie8會報錯 。只要這樣就能夠了。（不過ie就沒有此功能了，^_^誰讓你用ie8）

其餘像這樣的還有好多，下面是我從從damn browser的截圖。 是對該死的瀏覽器的一些小總結：

 

二 CSS

1.IE8 不支持  backgroud-size

好比我畫一個背景，代碼大概是這樣的：

那麼IE8就會爆炸。

如何hack？這樣寫：

background-image: url(/assets/my_bonus.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='/assets/my_bonus.gif',
    sizingMethod='scale');

2.max-width

IE 能夠種要求max-width 父元素寬度固定。因此可能存在chrome 正常，ie 爆炸的狀況。

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

三 HTML and HTML API

IE10+纔有FileReaderAPI。 So 若是要解析文件。要polyfill 。  另外要說的是就算是IE10+ ，依然沒有readAsBinaryString方法。。。。悲劇。。。

經過readAsArrayBuffer 模擬，而後掛在到對象原型鏈，代碼：

// extend FileReader
            if (!FileReader.prototype.readAsBinaryString) {
                FileReader.prototype.readAsBinaryString = (fileData) => {
                    let binary = '';
                    const pt = this;
                    reader.onload = function (e) {
                        const bytes = new Uint8Array(reader.result);
                        const length = bytes.byteLength;
                        for (let i = 0; i < length; i++) {
                            binary += String.fromCharCode(bytes[i]);
                        }
                        pt.parseFile(binary);
                    };
                    reader.readAsArrayBuffer(fileData);
                };
            }
            reader.readAsBinaryString(file);

還有一些HTML5標籤也是不能用的。

若是你在前端代碼中使用了HTML5的新標籤（header/footer etc），那麼在IE中這些標籤可能瞬間爆炸。我使用html5shiv

總結：

①

固然以上的這些均可以經過caniuse 查詢， 好比： 我想使用FileReader。 經過canuse查詢的結果是這個樣子的。

因此咱們就知道了IE8是不支持的  IE11部分支持 （紅色不支持，黃色部分支持，綠色爲支持）

對於不支持的咱們能夠hack之。  好比我前面hack的FileReader.readAsBinaryString()

②或者能夠經過一些polyfill， 將瀏覽器不支持的特性hack出來。咱們就能夠像使用原生同樣的使用它們。

還有各類增高墊（墊片shim）供你們選擇。

③ linter  。    經過一些linter， 能夠警告咱們哪些潛在存在兼容性問題：

for  IE8 linter：