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

推荐阅读更多精彩内容