项目突然要求支持到ie8,然后就开始在ie8下测试,发现很多问题。
首先是一个filter的问题,ie8下不支持filter。这个后来使用jQuery中的$filter解决掉。当然你用的js方法很多可以用相关的jQuery替换。
上面是第一个问题,然后花时间最多的是解决append的问题,我是在input标签下想append一些li的标签的,因为js代码逻辑很复杂代码体量也很大,排查这个问题的时候花了很多时间。一步步走,开始死活没想到会是这个的问题,后来知道后就开始想办法,网上查到的问题都是都是说你append的内容标签不闭合或者不是正规的html标签; 比如 这个

假如你使用了一个非正规的html标签,如下

然后,你用jquery给这个标签内加入或写一些内容,如下

$(“#grid”).append(“”);

再比如这个

这段代码在Chrome、FF、IE11 上,都是可以正常渲染的,但是在IE8
下不行,原因是domList里面的html字符串标签没有闭合。

var domList = ‘’; $(‘body’).append(‘domList’)

改成以下即可

var domList = ‘’; $(‘body’).append(‘domList’)

同理,<div> <span>等标签也一样,在IE8下要仔细检查标签闭合的问题。

还有其他的一些特殊的场景下的解决办法,比如

【问题描述】项目中,ajax返回一大串html,然后用jquery(1.4.4)
append方法,直接把html塞进去,结果ie8下有问题,网上查了一堆,说是标签未闭合,但是那一大串html如何检查是否闭合,哎,没招,用了折中的解决办法。

【解决办法】 var div = document.createElement(“div”); div.innerHTML =
data.data; $(“#wrap”)[0].appendChild(div);

在说了这么多后,我都试了,然后发现没有用,最后我才发现应该是ie8下的input 标签不支持直接放置li标签。后来我直接在input标签下先建了一个ol标签,然后把li标签再一个个的放进去。

ie 不支持includes替代方法 ie8不支持append方法_append

这样做这个问题就被解决掉了。

然后是遇到的第三个问题,是ie8下使用(".class").attr("value",XXX),和(“.class”).val(XXX)这两种方法,ie8认为是同一个!即两个同时使用,后一个会覆盖前一个。具体如下图

ie 不支持includes替代方法 ie8不支持append方法_val_02


ie 不支持includes替代方法 ie8不支持append方法_ie 不支持includes替代方法_03

ie 不支持includes替代方法 ie8不支持append方法_ie 8_04

上图中。attr先写的,那在后续使用val的时候就把标签属性中的value改为了和val里一样的东西。可以看下面的将val先写

ie 不支持includes替代方法 ie8不支持append方法_ie 不支持includes替代方法_05


ie 不支持includes替代方法 ie8不支持append方法_ie 8_06


ie 不支持includes替代方法 ie8不支持append方法_标签_07


从上图可以看到input标签中的value内容就改为了attr中的内容,同时val即显示所需的内容页改掉了。

至于这个问题的处理办法,我这边没有去做更多的处理,一是处理比较麻烦,二是项目里ie8使用的概率很低,也可以使用document的方式去处理,但这样花费的时间太多,老大建议不适用value属性的值从而规避这个问题。当然我查了查这也是我们项目自己作,加上了个value属性,一般都不存在或者换个其他的名字了~