浏览器兼容

1. 什么是 CSS hack

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

---

2. 谈一谈浏览器兼容的思路

1. 首先考虑要不要做兼容。从产品的角度考虑产品的受众，及受众使用的各浏览器的比例，效果优先还是基本功能优先。
2. 兼容哪些浏览器，兼容到什么版本，让哪些浏览器支持哪些效果。
3. 渐进增强和优雅降级的选择
4. 如何做兼容，根据兼容需求选择技术框架，比如：
   • Bootstrap (>=ie8)
   • jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
   • Vue (>= ie9)
5. 根据兼容需求选择兼容工具html5shiv.js、respond.js、css reset、Modernizr、postCSS
6. 考虑使用条件注释、CSS Hack、js 能力检测等对兼容做一些修补。

---

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

1. 条件注释
   条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
   
   
   
   
   
   使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中无法正常工作。 IE10不再支持条件注释

2. CSS hack
   可以实现只有IE才能识别的样式或html代码
   .box{
   color: red;
   _color: blue; /ie6/
   color: pink; /ie67/
   color: yellow\9; /ie/edge 6-8*/
   }

3. 根据浏览器选择相应的样式

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

4. 使用html5shiv.js可以使IE6，7兼容html5标签

5. 使用response.js十一使IE6，7支持媒体查询

---

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

• 条件注释
  作用：在HTML源码中写出能被IE有条件解释的代码，可以向IE提供或隐藏代码

• IE Hack
  作用：使用特殊的语句写出只有IE能够解析的代码，常见的IE Hack有属性前置法、选择器前置法和IE条件注释

• js 能力检测
  作用：使用js语句检测浏览器是否支持某种特定的属性

• html5shiv.js
  作用：可以解决IE9以下版本浏览器对html5标签不识别的问题

• respond.js
  作用：可以使IE6~IE8支持媒体查询

• css reset
  作用：因为早期的浏览器支持和理解的CSS规范不同，导致渲染出来的效果不一样，会出现兼容性问题，css reset通过重新定义标签的样式，覆盖浏览器的默认样式

• normalize.css
  作用：是一个很小的css文件，但它在默认的html元素样式上提供了跨浏览器的高度一致性，相比于reset.css，它是一种现代的，为html5准备的优质替代方案

• Modernizr
  作用：用于检测出浏览器是否支持某种html5和css3的新特性，浏览器是否禁用js等

• postCSS
  是一套使用js插件实现的转换CSS的工具；这些插件支持变量、混合语法等等；参考：PostCSS快速入门使用

---

5. 一般在哪个网站查询属性兼容性？
   caniuse :查css属性 选择器在各浏览器的兼容。
   browserhacks:查css属性 选择器在各浏览器Hack的写法