最近帮忙兄弟部门解决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
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>
<input type="checkbox" class="selectall" checked="checked">
<i class="checkbox iconfont" style="background: url("../../app/static/images/right.png") 0px 0px / 100% no-repeat;">
</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标签
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
这句话的作用是当存在ie高版本时默认使用ie最高版本，当存在谷歌浏览器时候，使用谷歌内核进行渲染页面。