浏览器兼容性问题

CSS兼容问题

1. reset.css 重置样式

不同的浏览器样式存在差异，可以通过 Normalize.css 抹平差异，也可以定制自己的 reset.css 来重置样式

body,div,span,a{   /* 出于性能考虑，不建议用*通配符 */
	margin:0;padding:0;
}

2. IE9 以下不能使用 透明属性 opacity

opacity: 0.5;

filter: alpha(opacity = 50);    /* IE6-IE8我们习惯使用filter滤镜属性来进行实现*/

filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);   /*IE4-IE9都支持滤镜写法*/

3. 浏览器 兼容前缀

部分的属性需要加上浏览器前缀，开发过程中我们一般通过IDE开发插件、css 预处理器以及前端自动化构建工程帮我们处理

-o-transform:rotate(7deg); // Opera

-ms-transform:rotate(7deg); // IE

-moz-transform:rotate(7deg); // Firefox

-webkit-transform:rotate(7deg); // Chrome

transform:rotate(7deg); // 统一标识语句

浏览器内核与前缀的对应关系如下

内核	主要代表的浏览器	前缀
Trident	IE浏览器	-ms
Gecko	Firefox	-moz
Presto	Opera	-o
Webkit	Chrome和Safari	-webkit

4. width:100%

IE 、opera： width:100% 会向上逐层搜索 width 值，忽视浮动层的影响.
Firefox : width:100%搜索至浮动层结束，只能给中间的所有浮动层加 width:100%才行。

5. cursor:hand

显示手型 cursor: hand，ie6/7/8、opera 都支持，但是safari 、 ff 不支持cursor: hand

cursor: pointer;    /*统一用cursor：pointer*/

6. a 标签 的状态顺序

有时候写 a 标签的样式会没有效果，或者点击超链接后，hover、active 样式没有效果，其实是写的样式被覆盖了。
正确的a标签顺序应该是：love hate

• link:平常的状态
• visited:被访问过之后
• hover:鼠标放到链接上的时候
• active:链接被按下的时候

JS兼容问题

1. 事件兼容性

1.1. 事件对象 和 事件源

• 当调用事件处理函数时候，会隐形的传入一个对象，这个对象就含有了事件的一些状态和信息
• ie中处理事件直接使用window.event对象即可，事件对象是全局的,随处都可以访问.
• 但其他浏览器中没有 window.event对象，需要在事件发生时把事件对象作为参数传递给函数

function handler(event){
    //获取事件对象 
    // 正常可以通过event参数传入，但IE9以下版本事件对象放在window对象上面
    e = event || window.event;
    //获取事件源 
    //IE下是 srcElement
    var target = e.target || e.srcElement;
    
}

1.2. 阻止浏览器默认行为 和 阻止冒泡

//阻止浏览器默认行为
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
//阻止冒泡写法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

1.3. 添加事件监听 / 移除事件监听 / 触发事件

• 添加事件绑定

//高级浏览器
ele.addEventListener('不加on的事件名',函数名,false)   //false是冒泡，true是捕获
//IE系列　　　
ele.attachEvent('加on的事件名'，函数名)　　

addEventListener:

1. 可添加多个同类型事件，添加的事件不会覆盖已存在的事件
2. 同一个元素中添加不同类型的事件。
3. 可选参数 useCapture 来演示冒泡和捕获阶段的不同

• 移除事件绑定

ele.removeEventListener('不加on的事件名',函数名,false) //高级浏览器
ele.detachEvent('加on的事件名'，函数名)   //IE

• 触发事件

//IE以外
elem.dispatchEvent(type);
//触发button的click事件
button.dispatchEvent('click');

//IE 
elem.fireEvent(type);
//触发button的click事件
button.fireEvent('onclick');

参考：

• javascript event（事件对象）详解
• 关于事件兼容性

---

2. ajax

if(window.XMLHttpRequest){
    var xhr = new XMLHttpRequest();
  }else{
    var oAjax=new ActiveXObject('Microsoft.XMLHTTP');  //ie
  }

3. H5的自定义属性 data-* 兼容问题

• data-* 是H5新增的自定义的属性，用于存储页面的私有自定义数据；以data-开头的属性都为数据属性。
• Chrome和Opera中 对象.dataset.属性名获取或修改属性；IE等 getAttribute/setAttribute获取或修改属性
• 并不是所有的浏览器都支持.dataset属性，测试的浏览器中只有Chrome和Opera支持

<div id="content" data-user-list="user_list">data-user_list自定义属性 </div>

var ele= document.getElementById('content');
//
alert(ele.dataset.name)  //获取自定义属性： 对象.dataset.属性名
ele.dataset.name='我叫tom'  //设置自定义属性： 对象.dataset.属性名 = 属性值   

ele.setAttribute('age', 25);      //setAttribute 设置属性
console.log(ele.getAttribute('data-age')); // getAttribute获取属性

参考：使用 data-* 好处和作用

4. 滚动条、窗口大小等兼容问题

滚动条滚动距离时:

• IE , Chrome: document.body.scrollTop
• FF: document.documentElement.scrollTop

// 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）
// 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// 网页内容实际宽高（包括工具栏和滚动条等边线）
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// 网页内容实际宽高 (不包括工具栏和滚动条等边线）
// 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// 滚动的高度
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;

5. ie不支持let/const关键字

IE下,只能使用var关键字来定义常量. let/const 关键字有兼容问题；let 到IE11，const到IE10；

解决方法：统一使用var关键字来定义常量.

6. 键盘事件 keyCode 兼容性

e.keyCode ? e.keyCode : e.which

7. 获取元素的非行间样式值

getComputedStyle(object,null)[oCss];   //非IE
object.currentStyle[oCss];    //IE

---

参考：

• 如何机智地回答浏览器兼容性问题
• 浏览器兼容性问题解决方案 · 总结
• js几个绕不开的事件兼容写法