浏览器兼容

1.什么是浏览器兼容？？

• 同一份代码，有的浏览器效果正常，有的不正常。

2.什么是CSS hack？

• 由于不同厂商的浏览器，比如IE，Mozilla Firfox，Chrome等，或者是同一个厂商的浏览器的不同版本，例如IE6 7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
  我们就要针对不同的浏览器，去写不同的CSS

3.谈一谈浏览器兼容的思路？

• 做一款产品，需要考虑这款产品，要不要做浏览器兼容，如果要做，要兼容到IE几，因为其他浏览器会自动升级，然后，如何去做。

• 看产品到底是哪些用户去用，如果说是一些政府，银行部门，他们用的就是一些老式的IE浏览器，那么我们要写的代码就是得稳定，什么最新的框架，技能，想都不用想。

• 假如说我们面对的是年轻群体，那么我们就着重网页的体验，效果。

• 要不要做？

• 从产品的角度(产品的受众,受众的浏览器比例，效果优先，还是基本功能优先。)
• 成本的角度(有无必要做某件事情。。)

• 做到什么程度？

要让哪些浏览器支持哪些效果；

• 如何去做？

• 根据兼容需求选择技术框架/库（jQuery）
• 根据兼容需求选择兼容的工具（html5shiv.js（https://github.com/aFarkas/html5shiv）respond.js（https://github.com/scottjehl/Respond），
  cssreset（https://segmentfault.com/a/1190000003021766），normalize.css（https://github.com/necolas/normalize.css），Modeernizr（https://github.com/postcss/postcss））
• postCSS（https://github.com/postcss/postcss）
• 条件注释，CSS Hack，js能力检测做一些修补。。

• 渐进增强：先真对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果，交互等改进和追加功能达到更好的用户体验。
• 优雅降级：一开始构建完整的功能，然后再针对低版本浏览器进行兼容。

4.列举5种以上浏览器兼容的写法？

1 . <--[if IE 6]>执行代码<![endif]-->如果是IE6则执行包含的代码

2. <--[if IE 8]>执行代码<![endif]--> 如果是IE8则执行包含的代码

3 .<--[ if !IE ]>< !-- >执行代码< !-- < ! [endif] -- 4 如果不是IE，则执行包含的代码。

ps： 使用条件注释的页面在IE9中可以正常工作，但是一到了IE10中就无法正常工作。。IE10不再支持条件注释。

最常见的清楚浮动：

Paste_Image.png

IE 6 7上实现inline-block

Paste_Image.png

5.以下工具/名词是做什么的

• 条件注释： 是用于HTML源码中被IE有条件解释的语句。条件注释可以被用来向IE提供及其隐藏代码。

• IE Hack：使用特殊的符号或者方式写出只有IE浏览器可以解析的代码，有CSS属性前缀法、选择器前缀法以及IE条件注释法

hack常见的写法：

Paste_Image.png

• js 能力检测：使用JS的语法检测浏览器支持的属性，以便展示效果

• html5shiv.js：创建一个标签，让IE6 7 8都能正常识别HTML5。。

• respond.js：让IE 6 7 8模拟CSS3的媒体查询；

• css reset：重置浏览器默认样式。比较暴力

• normalize.css：因为css reset太过暴力，normalize其实是温柔的重置浏览器样式，保留一些有用的样式，保护了有用的东西，修复了一些bug。。

• Modernizr：检测JS的兼容性。

• postCSS：PostCSS是一个JS插件转换样式表的工具。这些插件能够检验你的CSS、支持变量和混合，转化css3的新特性语法、行内图片等。

6.一般在哪个网站查询属性兼容性？

1.浏览器市场份额：http://tongji.baidu.com/data/browser
2.查询CSS兼容性：http://caniuse.com/
3.查询Hack的写法：http://browserhacks.com/

7.常见的属性兼容情况：

1.inline-block：>=ie8
2.min-width/min-height:>=ie8
3.:before,after:>=ie8
4.div:hover: >=ie7
5.inline-block:>=ie8
6.background-size:>=ie9
7.圆角：>=ie9
8.阴影：>=ie9
9.动画 渐变 ：>=ie10.

• 常用框架的兼容
  1.Bootstrap（>=ie8）
  2.JQuery 1.~（>=ie6），JQuery 2.~（>=ie9）;
  3.Vue(>=ie9)