浏览器兼容

1.什么是 CSS hack

CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

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

• 要不要做,产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）

• 成本的角度 (有无必要做某件事)
  做到什么程度让哪些浏览器支持哪些效果
• 如何做根据兼容需求选择技术框架/库(jquery)
• 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
• postCSS
• 条件注释、CSS Hack、js 能力检测做一些修补
• 渐进增强和优雅降级
  渐进增强
  (progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
  优雅降级
  (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
  stackoverflow-渐进增强和优雅降级的区别

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

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

• 类内属性前缀法：
  属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
  .box{
  color: red;
  _color: blue; /ie6/
  color: pink; /ie67/
  color: yellow\9; /ie/edge 6-8*/
  }
  清浮动
  .clearfix:after{
  content: '';
  display: block;
  clear: both;
  }
  .clearfix{
  zoom: 1; / 仅对ie67有效 */
  }
  ie6\7 display：inline-block；
  .target{
  display: inline-block;
  *display: inline;
  *zoom: 1;
  }
• 使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中无法正常工作。 IE10不再支持条件注释
  
  
  <script>alert(1);</script>
  
  
  兼容h5标签、响应式
  

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

• 条件注释

• 是于HTML源码中被 Microsoft Internet Explorer 有条件解释的语句。条件注释可被用来向 Internet Explorer 提供及隐藏代码。
• IE Hack
  • 由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
• js 能力检测
  • js 能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。采用这种方式不必顾及特定的浏览器如何如何，只要确定浏览器支持特定的能力，就可以给出解决方案。
• html5shiv.js
  • 用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
• respond.js
  • 用于解决IE9以下版本浏览器对媒体查询不识别，并导致CSS不起作用的问题。
• css reset
  • 早期的浏览器支持和理解的CSS规范不同，导致渲染页面时效果不一致，会出现很多兼容性问题，用于解决这些兼容问题
• normalize.css
  • Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS Reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。他们提倡，各个元素都有其存在的道理，简单粗暴地一视同仁是不好的。body 那一圈确实挤压了页面的生存空间，那就改掉。士农工商，谁有谁的作用，给他们制定个规范，确保他们在任何浏览器里都干好自己的活儿。
• Modernizr
  • 探测浏览器是否支持某种新特性，甚至可以加载额外的script脚本。会检测浏览器支持哪些属性，会在不支持某些属性的浏览器的页面中生成很多类名，通过这些类名自行定义样式。
• postCSS
• PostCSS是一个JS插件转换样式表的工具。这些插件能够检验你的CSS、支持变量和混合，转化css3的新特性语法、行内图片等。

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

浏览器市场份额
caniuse.com 查CSS属性兼容
browserhacks 查 Hack 的写法

备注：常用参考
html5shiv.js
respond.js
css reset
normalize.css
Modernizr
参考文章