IE8升级为IE11兼容性错误及解决方法总结

最近几个月一直在做IE升级的项目，在此，记录下项目中遇到的问题和解决方法。

首先项目原版本为IE8，要升级到的版本为IE11，由于IE在升级过程中不断的摒弃一些方法和更新一些方法，所以按照老版本IE编写的代码在新版本的IE上运行时会出现一些问题。这时候一般把方法改成最新的基本就可以了。

1.firstChild方法无法获取第一个标签

说明：其实不是没有获取到标签，而是在获取标签时，在第一个标签前，还存在着一个类似于空格符的text类型控件，所以firstchild会直接获取这个text。

解决方法：我一般使用childNodes[1]来跳过那一个text。

2.attachEvent方法出现错误

说明：在IE11中已经删除了attachEvent方法。

解决方法：使用addEventListener代替。同样的删除操作使用removeeventlistener方法。

3.document.all方法出现错误

说明：在IE11中已经删除了document.all方法

解决方法：使用document.getElementById方法获取。

4.页面出现一些标签的元素值无法获取的问题

说明：一般情况下是不会出现上述问题的，但是我修改的项目是2004-2007年左右的产物，所以不知道是不是那时候流行把JS语句或者调用JS的语句放在页面最上面，然后在页面初始化函数中进行了页面标签属性的查询&获取，这时候，由于页面初始化时从上往下的，所以会出现函数在查找&调用标签了，但是标签还没有初始化出来，所以会查不到相应的标签&属性，所以报错。

解决方法：很简单，把JS语句或者调用语句放到页面最下方，等页面初始化完成即可，还有尽量不要把JS语句写到JSP页面中，这样写会拖慢网页速度。

5.HierarchyRequestError错误   appendChild相关

说明：这个的实际原因我也不是很清楚。我遇到的错误是document.appendChild(html语句)这样的写法出错；网上还有另一种出错情况，就是append(xxx.append())这样的套层写法，这个只要把里面的append()拿出来，在外面调用就行。

解决办法：我遇到的情况是添加一个body，如document.body.appendChild(html语句)。

6.disabled属性

说明：一般情况下，改变一个标签的disabled属性可以直接使用document.标签名.disabled=true/false 就行,true表示不可用，false表示可用。但是如果使用”true/false”时两者并无区别，都是不可用状态，可以使用 “” 来设置为可用状态。

在页面中调试时，IE11的 F12调试页面，不管怎么修改标签中的disabled，都不会改变页面上标签的状态，这时候在CSS中修改可以立即改变状态，不知道这是为什么，可以用来调试时使用，修改的坏还是要到页面原代码中修改。同样的display也会出现类似上面的情况。

1.13

7.document.body.fireEvent('onmousedown');失效

说明：具体不是很了解，IE的新版本对该方法的兼容性不好，也有可能该方法已被删除

解决方法：

使用如下代码替换即可：

var evt3 = document.createEvent("MouseEvents");
evt3.initMouseEvent("'onmousedown", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
document.body.dispatchEvent(evt3);

2.18

8.form表单的提交

说明：由于这个问题是非常非常基础的，所以也容易忘记，就是在form表单中，使用button标签时，会默认点击button后提交表单。就像我遇到的那样，项目里的select标签是公司自己自定义写的（用text文本框，input标签，button标签来模拟select标签），在ie8上点击下拉框正常，在ie11下就直接提交表单了。

修改方法：使用其他的标签来模拟button即可，或者使用js来阻止点击button后提交表单。

2.25

9.childNodes[0]获取不到子标签

说明：在ie11中，由于该方法获取子元素时，会将空格符等也当成标签进行获取，所以会出现想要获取一个标签的第一个子标签时无法获得的情况。

解决办法：使用childNodes[1]，一般来说获取的空格符只会有一个，所以可以向后一位去取值就能找到第一个子标签了。

不断更新中…

由于调换项目组，所以暂时停止更新