IE8和IE9的兼容性

发表于

检测IE版本号

通过以下函数可以区分IE版本号，以便兼容不同特性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//检测函数
function checkIeVersion(version) {
    var div = document.createElement("div");
    div.innerHTML = "<!--[if IE " + version + "]><i></i><![endif]-->";
    return div.getElementsByTagName("i").length === 1;
}
function getIe() {
    var versions = [9, 8, 7, 6];
    for (var i = 0; i < versions.length; i++) {
        if (checkIeVersion(versions[i])) {
            return versions[i];
        }
    }
    return 0;
}

border-radius

常见于IE8以下，包括IE8不支持此特性，要想兼容的办法很多，这里试举一例：

使用PIE来支持border-radius

1
2
3
4
5
6
7
8
9
10
11
12
.pie_radius{
    
    width:200px;
    height:200px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    position:relative;
    //兼容IE8以下
    behavior:url(pie.htc);
}

这里必须注意，需要引入pie.htc文件。下载地址：链接

data-*

在IE8之前，包括IE8，都不兼容HTML5，所以需要获取data-*的数据需要这样写：

1
2
3
4
//正常获取data-*
document.getElementById('index').dataset.index;
//IE8以下，获取data-*
document.getElementById('index').getAttribute('data-index');

classList

类名操作器，如果使用classList属性，就可以简单的使用contains(),add(),remove()等函数，但如果不支持的话，我们就需要使用更原始的办法：

从IE9以下，包括IE9就不支持classList了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function hasClass(element,className) {
    if(ieVersion<10){
        return !!element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
    }else{
        return !!element.classList.contains(className);
    }
}
function addClass(element, className){
    if(ieVersion<10){
        element.className += ' ' + className;  
    }else{
        element.classList.add(className);
    }
}
function removeClass(element, className) {
    if(ieVersion<10){
        element.className = element.className.replace(
            new RegExp('( |^)' + className + '( |$)', 'g'), ' ').trim();
    }else{
        element.classList.remove(className);
    }
}

mouseout

IE8的mouseout事件需要onmouseout，IE9以上只需要mouseout。