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
