浏览器兼容

浏览器兼容

什么是浏览器兼容

• 同一份代码，有的浏览器效果正常，有的不正常
  • 不正常的原因是什么？（不支持？bug？）
  • 如何让它展示正常？（条件注释？单独Hack？）

为什么会有浏览器兼容问题

• 同一产品，版本越老，bug越多
• 同一产品，版本越新，功能越多
• 不同产品，不同标准，不同实现方式

通过网站查询属性兼容性

• 浏览器市场份额
• 查阅CSS属性兼容
• 查阅Hack的写法

处理浏览器兼容问题的思路

• 要不要做
  • 产品的角度
    • 产品的受众，比如是面向年轻群体，还是面向政府或单位部门
    • 受众的浏览器比例
    • 效果优先还是基本功能优先
  • 实现难度和成本考虑，比较一下投入产出比
• 做到什么程度
  • 综合考量需要做到什么浏览器什么版本的兼容，比如兼容到IE7 还是IE6
• 怎么做？
  • 优雅降级还是渐进增强
  • 根据兼容需求选择技术框架／库（jquery）
  • 根据兼容需求选择兼容工具（html5shiv.js、respond.js、css reset、normalize.css、Modernizr）
  • postCSS
  • 利用条件注释、CSS Hack、js 能力检测做一些修补

渐进增强和优雅降级

• 渐进增强（progressive enhancement）：针对低版本浏览器构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
• 优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
• stackoverflow - 渐进增强和优雅降级的区别

处理兼容问题的手段

合适的框架

• Bootstrap(>=IE8)
• JQuery 1.~(>=IE6) JQuery 2.~(>=IE9)
• Vue(>=IE9)
• ...

CSS hack

• 由于不同厂商的浏览器，比如Internet Explorer，Safari，Mozilla Firefox，Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。
• 简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
• CSS Hack 大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
  • 属性前缀法（即类内部Hack）：例如 IE6能识别下划线 _ 和星号 *，IE7能识别星号 *，但不能识别下划线 _，IE6~IE10都认识 \9，但firefox前述三个都不能认识
  • 选择器前缀法（即选择器Hack）
  • IE条件注释法（即HTML条件注释Hack）：针对所有IE（注：IE10+已经不再支持条件注释）： ，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效

CSS 属性前缀法

.hack{  
    /*demo1 */  
    /*demo1 注意顺序，否则IE6/7下可能无法正确显示，导致结果显示为白色背景*/  
    background-color: red; /* All browsers */  
    background-color: blue !important;/* All browsers but IE6 */  
    *background-color: black; /* IE6, IE7 */  
    +background-color: yellow;/* IE6, IE7*/  
    background-color: gray\9; /* IE6, IE7, IE8, IE9, IE10 */  
    background-color: purple\0; /* IE8, IE9, IE10 */  
    background-color: orange\9\0;/*IE9, IE10*/  
    _background-color: green; /* Only works in IE6 */  
    *+background-color: pink; /*  WARNING: Only works in IE7 ? Is it right? */  
}  
.hacktest{   
    background-color: blue;      /* 都识别，此处针对firefox */  
    background-color: red\9;      /*all ie*/  
    background-color: yellow\0;    /*for IE8/IE9/10 最新版opera也认识*/  
    +background-color: pink;        /*for ie6/7*/  
    _background-color: orange;       /*for ie6*/  
}

浏览器私有前缀添加

-webkit-border-radius: 50%; // chrome
-o-border-radius: 50%; // opera
-moz-border-radius: 50%; // FixFore
-ms-border-radius: 50%; // IE edge

选择器前缀法

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

IE条件注释法

• 条件注释（conditional comment）：利用IE6～9的漏洞（可识别特定特定注释）来区分IE各版本，或区分IE和非IE的一种css hack技术。

只在IE下生效


只在IE6下生效


只在IE6以上版本生效


只在IE8上不生效


非IE浏览器生效

• 使用了条件注释的页面在 Windows IE9- 中可正常工作，但在 IE 10+ 中无法正常工作，因为 IE 10 不再支持条件注释

项目	范例	说明
!	[if !IE]	非IE
lt（less than）	[if lt IE 5.5]	小于IE5.5
lte（less than or equal to）	[if lte IE 6]	小于等于IE6
gt（greater than）	[if gt IE 5]	大于IE5
gte（greater than or equal to）	[if gte IE 7]	大于等于IE7
竖线（容易误识别，所以用文字代替）	[if(IE 6)竖线(IE 7)]	IE6或者IE7

常见属性的兼容情况

inline-block:   >=IE8
min-width/min-height:   >=IE8
:before, :after:    >=IE8
div:hover:  >=IE7
background-size:    >=IE9
圆角  >=IE9
阴影  >=IE9
动画／渐变   >=IE10

• 常见兼容处理范例：

.clearfix:after {
    content: '';
    display: block;
    clear: both;
}
.clearfix {
    *zoom: 1; /* 仅对ie6、7有效 */
}

.target {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

js 能力检测

• 也称特性检测，使用JS的语法检测浏览器支持的属性和方法。
• 能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，就可以给出相关的方案
• 基本默认如下：

//特性检测
if (object.propertyInQuestion) {
    //使用object.propertyInQuestion
}

• 参考：浅谈JavaScript中的能力检测

处理兼容问题的工具

html5shiv.js

• html5shiv.js
• 作用：兼容性工具。引入后可在IE6~8（不支持html5标签）上模拟html5标签，将其作为块状元素显示
• 参考：HTML5 Shiv – 让该死的IE系列支持HTML5吧

respond.js

• respond.js
• 作用：兼容性工具。引入后在IE6~8（不支持css3）上模拟CSS3 Media Queries
• 参考：Respond.js让IE6-8支持CSS3 Media Query

CSS reset

• 作用：兼容性工具，思想是重置所有浏览器默认样式，让一切归零。
• 参考：关于CSS Reset 那些事（一）之 历史演变与Normalize.css

normalize.css

• normalize.css
• 作用：兼容性工具。尽量保留浏览器的默认样式，不进行太多的重置，在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS Reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案
• Normalize.css 做了哪些事？
  • 保护有用的浏览器默认样式而不是完全去掉它们
  • 一般化的样式：为大部分HTML元素提供
  • 修复浏览器自身的bug并保证各浏览器的一致性
  • 优化CSS可用性：用一些小技巧
  • 解释代码：用注释和详细的文档来

Modernizr（处理浏览器兼容问题）

• Modernizr
• Modernizr是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。该工具会为浏览器的html标签生成一批的css的class名称，标记当前浏览器支持和不支持的特性。我们利用html标签上的类名，就可以为不同版本的不同浏览器添加兼容样式。使用时可直接引入CDN链接即可。
• 参考：前端的瑞士军刀Modernizr.js

postCSS

• postCSS
• 它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如 autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer 可以帮我们自动生成兼容性代码
• 参考：PostCSS简介

如何调试老掉牙的 IE

• 安装虚拟机
• 给元素添加border