ie8下append问题及attr("value",xxx)和val(xxx)问题总结
2017-11-21 16:34
513 查看
项目突然要求支持到ie8,然后就开始在ie8下测试,发现很多问题。
首先是一个filter的问题,ie8下不支持filter。这个后来使用jQuery中的$filter解决掉。当然你用的js方法很多可以用相关的jQuery替换。
上面是第一个问题,然后花时间最多的是解决append的问题,我是在input标签下想append一些li的标签的,因为js代码逻辑很复杂代码体量也很大,排查这个问题的时候花了很多时间。一步步走,开始死活没想到会是这个的问题,后来知道后就开始想办法,网上查到的问题都是都是说你append的内容标签不闭合或者不是正规的html标签;
比如 这个-http://blog.sina.com.cn/s/blog_575b0ca50100rgk3.html
假如你使用了一个非正规的html标签,如下
然后,你用jquery给这个标签内加入或写一些内容,如下
$(“#grid”).append(“”);
再比如这个
https://segmentfault.com/a/1190000008342904
这段代码在Chrome、FF、IE11 上,都是可以正常渲染的,但是在IE8
下不行,原因是domList里面的html字符串标签没有闭合。
var domList = ‘’; $(‘body’).append(‘domList’)
var domList = ‘’; $(‘body’).append(‘domList’)
还有其他的一些特殊的场景下的解决办法,比如
https://www.cnblogs.com/sniper007/archive/2012/12/18/2823642.html
【问题描述】项目中,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标签再一个个的放进去。
这样做这个问题就被解决掉了。
然后是遇到的第三个问题,是ie8下使用(".class").attr("value",XXX),和(“.class”).val(XXX)这两种方法,ie8认为是同一个!即两个同时使用,后一个会覆盖前一个。具体如下图
上图中。attr先写的,那在后续使用val的时候就把标签属性中的value改为了和val里一样的东西。可以看下面的将val先写
从上图可以看到input标签中的value内容就改为了attr中的内容,同时val即显示所需的内容页改掉了。
至于这个问题的处理办法,我这边没有去做更多的处理,一是
a5a7
处理比较麻烦,二是项目里ie8使用的概率很低,也可以使用document的方式去处理,但这样花费的时间太多,老大建议不适用value属性的值从而规避这个问题。当然我查了查这也是我们项目自己作,加上了个value属性,一般都不存在或者换个其他的名字了~
首先是一个filter的问题,ie8下不支持filter。这个后来使用jQuery中的$filter解决掉。当然你用的js方法很多可以用相关的jQuery替换。
上面是第一个问题,然后花时间最多的是解决append的问题,我是在input标签下想append一些li的标签的,因为js代码逻辑很复杂代码体量也很大,排查这个问题的时候花了很多时间。一步步走,开始死活没想到会是这个的问题,后来知道后就开始想办法,网上查到的问题都是都是说你append的内容标签不闭合或者不是正规的html标签;
比如 这个-http://blog.sina.com.cn/s/blog_575b0ca50100rgk3.html
假如你使用了一个非正规的html标签,如下
然后,你用jquery给这个标签内加入或写一些内容,如下
$(“#grid”).append(“”);
再比如这个
https://segmentfault.com/a/1190000008342904
这段代码在Chrome、FF、IE11 上,都是可以正常渲染的,但是在IE8
下不行,原因是domList里面的html字符串标签没有闭合。
var domList = ‘’; $(‘body’).append(‘domList’)
改成以下即可
var domList = ‘’; $(‘body’).append(‘domList’)
同理,<div> <span>等标签也一样,在IE8下要仔细检查标签闭合的问题。
还有其他的一些特殊的场景下的解决办法,比如
https://www.cnblogs.com/sniper007/archive/2012/12/18/2823642.html
【问题描述】项目中,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标签再一个个的放进去。
这样做这个问题就被解决掉了。
然后是遇到的第三个问题,是ie8下使用(".class").attr("value",XXX),和(“.class”).val(XXX)这两种方法,ie8认为是同一个!即两个同时使用,后一个会覆盖前一个。具体如下图
上图中。attr先写的,那在后续使用val的时候就把标签属性中的value改为了和val里一样的东西。可以看下面的将val先写
从上图可以看到input标签中的value内容就改为了attr中的内容,同时val即显示所需的内容页改掉了。
至于这个问题的处理办法,我这边没有去做更多的处理,一是
a5a7
处理比较麻烦,二是项目里ie8使用的概率很低,也可以使用document的方式去处理,但这样花费的时间太多,老大建议不适用value属性的值从而规避这个问题。当然我查了查这也是我们项目自己作,加上了个value属性,一般都不存在或者换个其他的名字了~
相关文章推荐
- ie8下attr(‘value’)和val()区别
- l.append("%s=%s" % (attr, `value`))
- 使用SpringMVC注解@RequestParam(value="XXX",required=false)时需要注意的问题
- jQuery attr("value") 和 val的区别
- 使用SpringMVC注解@RequestParam(value="XXX",required=false)时需要注意的问题
- jquery版本号升级不兼容的问题:$("input").attr("value")功能发生改变
- 多个类定义attr属性重复的问题:Attribute "xxx" has already been defined
- jquery版本升级不兼容的问题:$("input").attr("value")功能发生改变
- 使用SpringMVC注解@RequestParam(value="XXX",required=false)时需要注意的问题
- 使用SpringMVC注解@RequestParam(value="XXX",required=false)时需要注意的问题
- JQuery中,.val()与 .attr("","");的区别,以及placeholder与value冲突
- 【转】多个类定义attr属性重复的问题:Attribute "xxx" has already been defined
- 使用SpringMVC注解@RequestParam(value="XXX",required=false)时需要注意的问题
- 使用SpringMVC注解@RequestParam(value="XXX",required=false)时需要注意的问题
- jquery .attr("value") 与 .val() 区别 以及siblings()用法
- 使用SpringMVC注解@RequestParam(value="XXX",required=false)时需要注意的问题
- JQuery中,.val()与 .attr("","");的区别,以及placeholder与value冲突
- JQuery $("#id").val(value); 给select选值不出现问题
- ie8下奇怪的问题:float:left之后,右侧的div会影响左侧
- Python "python ImportError: No module named XXX" 问题