PC端浏览器兼容

浏览器生态丰富，不同厂商甚至不同版本之间差异性都很大，经历过IE6~8版本兼容处理的开发都懂得。Web开发很难做到所有版本的浏览器都兼容，而且不同的用户群体使用的浏览器版本趋势不同，所以在开发前有必要先收集用户使用浏览器的统计数据，再确定兼容策略。

一、确定浏览器分级

除IE自身版本之间差异较大外，其他浏览器由于内核不一，对脚本和样式的处理方式也不一样.

1、国内常见浏览器的兼容性如下

2、国内常见浏览器内核表

注意：针对CSS3新属性，需要加浏览器前缀来兼容早期浏览器

3、浏览器具体分级

• 完全兼容: 保证百分百功能正常。（如：Chrome49+，Firefox44+）
• 部分兼容: 只能保证功能、样式与需求大致一致，对于一些不影响主体需求和功能的bug，会做降低优先级处理或者不处理。（如：Chrome28+，Firefox37+，IE11）
• __不兼容:__不考虑兼容性。（如：其他）

4、兼容推荐

• 获取统计数据

在需求整理阶段，可确定用户群体，借助人工手段或在线工具统计用户使用浏览器的情况，从而选择性进行兼容开发，节约开发成本。

• 一般应用推荐兼容：

Chrome、Firefox、Edge、IE11、360

二、浏览器兼容策略

渐进增强和优雅降级

1、渐进增强

渐进增强保证低版本浏览器的体验，对于支持新特性的新浏览器提供稍好的体验

2、优雅降级

优雅降级, 为现代浏览器提供最好的体验，而旧浏览器则退而求之次，保证大概的功能.

3、使用哪种策略的决定权在用户

选择不同的策略对前端开发的影响是比较大的，但是开发者没有选择权。确定哪种兼容策略，应该取决于用户比重，如果大部分用户使用的是现代浏览器，就应该使用优雅降级，反之选择渐进增强。

三、推荐处理浏览器兼容做法

1、条件注释法

在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才执行代码。

• HTML条件注释关键字说明表
  

2、HTML加上特殊类

在标签上加上操作系统、浏览器内核、浏览器类型、CSS3动画支持、IE各版本类，然后按照类名定义不同环境下的样式，可实现不同浏览器下的差异化体验，也便于快速定位并修复某个浏览器下的特定bug。

• 如淘宝首页HTML类

• 也可用条件注释法为不同浏览器添加特定类
  

3、引入浏览器兼容框架

• normalize.css：让不同的浏览器在渲染网页元素的时候形式更统一
• html5shiv.js：让IE6~IE8识别HTML5标签，并且可以添加CSS样式
• respond.js：使IE6~IE8浏览器支持CSS3媒体查询

可采用条件注释法引入js

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

4、引入样式前缀自动化插件

上述有提到不同浏览器有不同的引擎前缀，针对css3新属性，需要加浏览器前缀来兼容早期浏览器。Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并添加浏览器前缀到CSS内容中，使用Can I Use网站的数据来决定哪些前缀是需要的。
把Autoprefixer添加到资源构建工具（如webpack、gulp、grunt）后，只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览器，可修改browsers参数设置

// 我们编写的样式
div {
    
	transform: rotate(30deg);
}
// 自动补全的样式，具体补全哪些由要兼容的浏览器版本决定，可以自行设置
div {
    
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  transform: rotate(30deg);
}

5、IE采用最新渲染模式

在标签中加入下面这段代码：

<meta http-equiv= "x-ua-compatible" content= "ie=edge">

6、自查兼容性

caniuse 主要为html5、css3兼容性检测

四、常见兼容方案

不同浏览器的标签默认的外margin 和内padding不同
在css入口中添加以下通配符样式，也可引入上文提到的Normalize来清除默认样式

* {
     margin: 0; padding: 0; }

• IE9以下版本浏览器不能使用opacity

opacity: 0.5; // normal
filter: alpha(opacity = 50); // for IE7~IE8
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); // for IE6

• Firefox、Safari 不支持cursor: hand

// 统一使用
cursor: pointer;

• 清除浮动‘

.clearfix:after {
     
    content: ""; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

• 超链接访问过后hover样式丢失，主要是被点击访问过的超链接样式不在具有hover和active，解决方法是改变CSS属性的排列顺序: L-V-H-A

a:link{
    …}  
a:visited{
    …}  
a:hover{
    …}  
a:active{
    …}

• chrome下默认会将小于12px的文本强制按照12px来解析

// css入口加入以下写法
-webkit-text-size-adjust: none;

2、JS相关

• Firefox不支持innerText, 用textContent处理innerText的兼容性问题

function getInnerText(element) {
     
	if (typeof element.innerText === 'string') {
    
		return element.innerText;
	} else {
    
	    return element.textContent
	}
} 

• 获取网页可见区域的宽高、整个区域的宽高、滚动的距离

// 可见区域的宽高
const winW = document.body.clientWidth || document.documentElement.clientWidth;
const winH = document.body.clientHeight || document.documentElement.clientHeight;
// 整个区域的宽高
const winW = document.body.scrollWidth || document.documentElement.scrollWidth;
const winH = document.body.scrollHeight || document.documentElement.scrollHeight;
// 网页被卷去的高
const scrollHeight = document.body.scrollTop || document.documentElement.scrollTop;
// 网页左卷的距离
const scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;

• 事件绑定与解绑

// 添加事件监听，三个参数分别为：对象、事件类型、事件处理函数
function addEvent(dom, type, fn) {
    
  if (dom.addEventListener) {
    
    dom.addEventListener(type, fn ,false); // 非IE
  } else {
    
    dom.attachEvent('on' + type, fn); // IE
  }
}
// 删除事件监听
function removeEvent(dom, type, fn) {
     
  if (dom.removeEventListener) {
    
    dom.removeEventListener(type, fn, false); // 非IE
  } else{
    
    dom.detachEvent('on' + type, fn); // IE
  };
}

• Event事件对象的兼容写法

// Chrome、Firefox、IE9+支持，IE9以下不支持；
document.onclick=function(ev){
     
  const e=ev;
  console.log(e);
}
// Chrome和IE支持，Firefox不支持；
document.onclick=function(){
    
  const e= window.event;
  console.log(e);
}
// 兼容写法
document.onclick = function (ev) {
    
  const e = ev || window.event;
}

• 停止事件冒泡

// 兼容写法
if (e.stopPropagation) {
     // 针对非ie浏览器
    e.stopPropagation();
} else {
     // 针对ie浏览器
    e.cancelBubbles = true;
}

• 阻止浏览器默认行为

// 兼容写法
if (e.preventDefault) {
     // 针对非ie浏览器
    e.preventDefault();
} else {
     // 针对ie浏览器
    window.event.returnValue = false;
}

• 获取dom事件的target对象

//兼容写法
// IE浏览器：e.srcElement;
// 其他浏览器：e.target;
dom.onclick = function(eve) {
    
    const e = eve || window.event;
    const target = e.target || e.srcElement;
    console.log(target.innerHTML);
}

• 获取键盘事件

// 兼容写法
// IE浏览器：event.which
// 其他浏览器：event.keycode
const e = eve || window.event;
const code = e.keyCode || e.which

• 获取dom的外部样式

// 兼容写法
// dom.style.attr 无法获取外部样式
function getStyle(dom,attr) {
    
  if (dom.currentStyle) {
    
    return dom.currentStyle[attr]; // 兼容IE
  } else {
    
    return getComputedStyle(dom, null)[attr]; // 兼容Chrome、Firefox
  }
}