项目ie8bug解决（前端）

最近帮忙兄弟部门解决ie8兼容问题，接手时据说上一个技术号称兼容ie8，但是并不是这样的，css3，h5标签的疯狂使用，伪类的随意使用，代码的胡乱堆砌，不计后果的引入插件，不仅造成了ie8不兼容，而且造成了代码行走加载时间过慢，（这个项目是见识过的启动最慢的啊……）。

废话不多话，上问题和代码，这里罗列了大致的问题和具体的解决方法：

iebug

1 document.getElementById(“id”).files[0]属性到ie10才兼容
解决方法：document.getElementById(“id”).value

2 opcity对于ie有兼容性，一般这种情况下是ie不生效用filter:Alpha(opacity=“num”)

3 :after :checked ~选择器等的兼容性用js逻辑解决

举例：

!(function () {

var markedLen = 0;

var count = 0;

var browser=navigator.appName

扫描二维码关注公众号，回复： 2263791 查看本文章

var b_version=navigator.appVersion

var version=b_version.split(";");

var trim_Version;

if (version.length <=1 ){

trim_Version="IntelMacOSX10_13_5)AppleWebKit/537.36(KHTML,likeGecko)Chrome/67.0.3396.99Safari/537.36";

} else {

trim_Version=version[1].replace(/[ ]/g,"");

}

if((browser=="Microsoft Internet Explorer" && trim_Version=="MSIE8.0")) {

var bindCheckbox = setInterval(function () {

if ($("input[type='checkbox']").length == 0) {

count++

if (count == 20) {

clearInterval(bindCheckbox);

}

} else if (markedLen < $("input[type='checkbox']").length) {

markedLen = $("input[type='checkbox']").length;

} else if (markedLen == $("input[type='checkbox']").length) {

bindCheckboxClick();

clearInterval(bindCheckbox);

}

}, 800);

}

function bindCheckboxClick(){

var checkbox = [];

if($("input[type='checkbox']").length != 0){

for (var i = 0 ,leni = $("input[type='checkbox']").length;i < leni ; i ++ ){

checkbox.push($("input[type='checkbox']")[i]);

if((browser=="Microsoft Internet Explorer" && trim_Version=="MSIE8.0")){

//如果是ie8

if(checkbox[i].checked == true || checkbox[i].checked == "checked"){

$(checkbox[i]).next().css({"background":"url(/app/static/images/right.png) no-repeat 0px 0px","background-size":"100%"});

}

$(checkbox[i]).next().on("click",function(){

var _self = this;

var afterClick = setTimeout(function(){

if((_self.previousSibling.checked == true || _self.previousSibling.checked == "checked")){

var afterClick = _self.previousSibling.checked;

$(_self).css({"background":"url(/app/static/images/right.png) no-repeat 0px 0px","background-size":"100%"});

$(_self).prev().attr("checked","true");

}else{

$(_self).css("background","#fff");

$(_self).prev().removeAttr("checked");

}

},350);

});

}else{

$(checkbox[i]).on("click",function(){

var _self = this;

if(_self.checked == true || _self.checked == "checked"){

$(_self).next().css({"background":"url(/app/static/images/right.png) no-repeat 0px 0px","background-size":"100%"});

$(_self).attr("checked","checked");

}else{

$(_self).next().css("background","#fff");

$(_self).removeAttr("checked");

}

});

}

}else if(markedLen < $("input[type='checkbox']").length){

}

})();

以上代码时为input[type=checkbox]初始化，并在点击的时候绑定事件，为相邻的i元素添加背景图片，用于页面显示，并且达到选中和未选中的状态

（这个关于checkbox的问题是我着重解决的一个问题，表现为只在ie8下点击checkbox并没有选中的样式，如下图）

代码结构如下：

<th>

　　<label>

　　　　</i>全部

　　</label>

</th>

一般的不兼容ie8的逻辑为

input[type=checkbox]:checked ~ .checkbox:after {
    font-size: 14px;
    content: "\e601";
    color: #fff;

    background: #52bf63;
    border: solid 1px #52bf63;
}
但是:checked对ie8存在兼容性问题，导致了点击相应的checkbox之后出不来对应的打钩的效果。所以采取解决办法，点击相应的checkbox之后为之后的i标签添加相应的样式。
这种映射关系可以在UI样式上体现出被点击的效果，亦不影响checkbox的点击效果。
以上代码在判断为ie8时候获取dom中所有的checkbox的个数，对checkbox进行初始化，并为其后的i元素之绑定click事件，效果为点击相应的i标签本身背景变成选中状态，与
之相邻的input的checked属性变成true，否则移除checked属性，表示未选中。

4 低版本的ie会对console.log()方法报错，所以一定要过滤

5 jq高版本内置promise，es6所以对ie存在兼容性

6 ie8下对标签大小写不区分可以会造成bug

其实以上的bug都是一些常见的ie兼容性问题，平时疏于总结归纳，加上并不是经常有解决iebug的情景，记下来当做笔记，一起学习。

还有一句经常使用的meta标签

这句话的作用是当存在ie高版本时默认使用ie最高版本，当存在谷歌浏览器时候，使用谷歌内核进行渲染页面。

项目ie8bug解决（前端）

猜你喜欢