IE部分兼容性整理

1.IE滚动条处理

其他 ::-webkit-scrollbar ::-webkit-scrollbar-thumb ::-webkit-scrollbar-track

2.es6兼容问题

ie8不要用let。改成var。 for循环上下级标志字符修改。

3.css3兼容问题

最近在项目中，有很多地方都用到了线性渐变，比如：表单提交按钮的背景，数据展示的标题背景等等，按照以前的做法是切 1px 图片然后 repeat-x。下面我将介绍如何用 css 来完成该效果。 

css3：linear-gradient 

比如：黑色渐变到白色，代码如下： 

复制代码代码如下:

.gradient{ 
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); 
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); 
} 

ie 滤镜：filter 

linear-gradient 在 ie9 以下是不支持的，所以对于 ie6 - ie8 我们可以使用滤镜来解决，代码如下： 

复制代码代码如下:

.gradient{ 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); 
} 

由于 filter 是 ie 的私有属性，所以我们需要针对 ie9 单独处理滤镜效果，代码如下： 

复制代码代码如下:

:root {filter:none;} 

总结： 

综上所述，线性渐变的兼容写法如下： 

复制代码代码如下:

.gradient{ 
background: #000000; 
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); 
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); 
//  0 从上往下
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); 
} 
:root .gradient{filter:none;}

4.line-height

文字有时不能垂直居中，究竟IE9 line-height设置文字不能垂直居中原因是什么？

IE9不支持line-height原因：中文ie9不支持英文字体

相信大家在IE9看见自己使用line-height设置垂直居中文字不能垂直居中，这是与你设置字体有关，通常大家习惯设置font-family:Arial, Helvetica, sans-serif;

ie9中line-height失效解决方法：
只需设置好字体，添加个宋体即可解决 如CSS代码font-family:Arial, "宋体",Helvetica, sans-serif;

设置字体时候注意，还需设置大家都默认系统自带字体，如黑体，宋体

5. addEventListener和attachEvent函数中的this的指向问题及解决方法

    //这是一个使用addEventListener函数的代码片段
    obj.addEventListener('click',function(){
        console.log(this);//this指向obj
    },false);

    //这是一个使用attachEvent函数的代码片段
    obj.attachEvent('onclick',function(){
        console.log(this);//this指向window
    });

解决：ie下支持e.srcElement，ff支持e.target。

    //这是一个使用addEventListener函数的代码片段
    obj.addEventListener('click',function(e){
        console.log(this);//this指向obj
        console.log(e.target);//obj
    },false);

    //这是一个使用attachEvent函数的代码片段
    obj.attachEvent('onclick',function(e){
        console.log(this);//this指向window
        console.log(e.srcElement);//obj
    });
    
    //兼容两者： var target = e.srcElement ? e.srcElement : e.target;

6.label的click事件在ie8，ie9下无法进行，会一直选中checkbox

http://www.phpvar.com/archives/3318.html
解决：选中元素后添加元素过滤
iE8只支持: 不支持:: ！！！！！重要

7. a标签的target设置成_blank的时候href=void(0)失效

a标签在不同浏览器中点击事件触发的顺序不一样
https://www.jb51.net/article/103151.htm