浏览器的兼容性问题

浏览器的兼容性问题是指同一份代码，有的浏览器效果正常，有的浏览器不正常。

兼容问题的主要来源：

1. 同一产品，版本太老，bug越多，浏览器的更新本身就有修复这些bug的原因，添加支持新增代码，新增功能以及代码的新规则等等，则同一产品，版本越新功能越多，相对的bug也会少一些；
2. 不同产品，不同标准，不同的实现方式；因为虽说以w3c为主流，但是浏览器还有内核差异，渲染方式的差异，同一属性不同浏览器不同的效果等。

处理兼容性问题的主要思路：

• 要不要做
  • 产品的角度（产品的受众，受众的浏览器比例，效果优先还是功能优先）
  • 成本的角度（是否有必要做某件事）
• 做到什么程度
  • 让哪些浏览器支持哪些效果例如，pc端和移动端，支持哪些浏览器（例如：Chrome，IE，360等等），对于系统等级要求等等。
• 如何做
  • 根据需求选择技术框架/库（jquery版本问题）
  • 根据需求选择兼容工具（html5shiv.js,respond.js,css reset,normalize.css Modernizr(比较重要),PostCSS）
  • 使用一些较老的技术手段，例如：条件注释，CSS Hack ，JS能力检测做一些修补。

渐进增强和优雅降级

• 渐进增强是针对低版本的浏览器进行构建页面，保证最基本功能，然后在针对高级浏览器进行效果，交互等改进和追加功能打到更好的用户体验(一般在政府部门网站以及银行等部门使用较多)；
• 优雅降级是指一开始就构建完整的功能，然后针对低版本浏览器进行兼容（大部分网站 普遍使用该手段）。

处理兼容问题的手段

合适的框架：

1. bootstrap（>=ie8）
2. jQuery 1_{(>=ie6),jQuery2}(>-ie9)(2的代码量比1的小，文件体积也小）
3. Vue（>=ie9）

条件注释：

• 条件注释是于HTML源码中被IE有条件的解释的语句。条件注释可被用来向IE提供及隐藏代码。 只能用于IE浏览器6且只用于6-8版本， 在IE10不再支持条件注释。
• 写法：

CSS hack

什么是CSS hack：

• 由于不同厂商的浏览器，比如Internet Explorer, Safari,Moilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7， 对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能在不同的浏览器中也能得到我们想要的页面效果。总的来说就是使用一些奇怪的手段达到我们想要的目的。

CSS Hack：

• CSS Hack大致有3种表现形式，CSS属性 前缀法、 选择器前缀法以及IE条件注释法(即HTML头 部引用ifIE) Hack, 实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
  1. 属性前缀法(即类内部Hack):例如IE6能识别下划线""和星号" ", IE7能识别星号" "，但不能识别下划线""，IE6~1E10都认识"\9" ，但firefox前述三个都不能认识2.选择器前缀法(即选择器Hack)；
  2. 选择器前缀法（即选择器Hack);
  3. IE条件注释法(即HTML条件注释Hack):针对所有IE(注: IE10+ 已经不再支持条件注释): ，针対IE6及以下版本: 。这类Hack不仅対CSS生效，対写在判断珸句里面的所有代码都会生效。

常见的hack写法：

• 在IE6中，由于未对属性做检查多导致的，换句话说就是利用IE老版本浏览器自身的bug来实现样式覆盖达到相应的效果。

.box{
  color: red;
_color: blue;/*ie6*/
*color: pink;/*ie67*/
color: yellow;/*ie6-8*/
}

.ie8 .box{
  color: blue;
}

常见的属性兼容情况：

• inline-block:>=ie8
• min-width/min-height:>=ie8
• :before,:after:>=ie8
• div:hover>ie7
• background-size:>=ie9
• 圆角：>=ie9
• 阴影： >=ie9
• 动画/渐变：>=ie10

Modernizr:

• Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持[HTML5]和CSS3的浏览器中充分利用[HTML5]和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。
• 当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性同时也会检测是否支持[HTML5] 特性,标签的类型和属性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于JS的 fallback，或者对那些不支持的浏览器进行简单的优雅降级。另外，Modernizr还可以令IE支持对[HTML5]的元素应用CSS样式，这样开发者就可以立即使用这些更富有语义化的标签了。
  Modernizr的用法：

.no-flexbox .box{
  display:block;
}

在用户禁用js时，无法使用时需提示用户使用js。

.no-js{

}

何动手测试浏览器兼容性：

• 对于 windows 系统，下载个360浏览器，点地址栏的小图标可以切换兼容模式和极速模式。其中极速模式是 webkit 内核，而兼容模式就是 ie 内核。 在兼容模式下浏览器界面右键，可以切换兼容的浏览器。ie7到 ie11都可以切换。用来测试很方便。