IE之不完全罪状（持续更新）

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

开始之前先说点题外话。如国内浏览器特别多，而且都是包壳。这些浏览器一般来讲为了保证浏览器兼容性都会默认使用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的。要想使用大概要这样子：

这个是阿里的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：

来源：oschina

链接：https://my.oschina.net/u/2267438/blog/687182

标签

filereader