什么是 CSS hack

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

CSS属性前缀法
选择器前缀法
IE条件注释法

谈一谈浏览器兼容的思路

产品角度考虑：考虑产品的受众、受众使用的浏览器比例、页面效果优先还是基本功能优先。
成本角度：是否有必要为了追求网页效果而花费资源；还是保持页面基本功能、节约成本。
项目、产品需求角度：需要兼容哪些浏览器；或是兼容到哪些浏览器的哪部分版本；需要让浏览器实现哪些功能。
从产品的市场定位或功能定位角度出发：是选择渐进增强：先保证基本功能，再根据需求及资源完善页面效果；还是选择优雅降级：先构建网页的整体功能效果，再往下满足低版本浏览器的兼容性。
根据兼容性需求选择合适的框架：
合适的框架：
Bootstrap：>=IE8
jQuery1.~ ：>=IE6,jQuery 2.~ >=IE9
vue >=ie9
根据需求选择合理的兼容性开发工具：html5shiv.js、respond.js、css reset、normalize.css、Modernizr、postCSS

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

IE条件注释法

！   [if !IE]             非IE
lt  [if lt IE 5.5]     小于IE 5.5
lte   [if lte IE 6]      小于等于IE6
gt  [if gt IE 5]         大于 IE5
gte   [if gte IE 7]     大于等于IE7
|    [if (IE 6)|(IE 7)]   IE6或者IE7

选择器前置法

_body{}    
*body{}       /*IE6能识别下划线和*号其他浏览器都不能，IE7能识别下划线。
body/9{}      /*IE6-IE10都能识别/9，而firefox对这几个标号都不能识别。

CSS属性前缀法

.box{
          color: red;
          _color: blue;              /*ie6能识别*/
          *color: pink;              /*ie67都能识别*/
          color: yellow\9;           /*ie/edge 6-8都能识别*/
    }

.clearfix{
              content:'';
              display:block;
              clear:both;
}
.clearbox{
              *zoom:1;         /*仅对IE6 7 有效，出发了haslayout*/

Modernizr工具
运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例:canvas,websockets），不支持的特性显示的class是“no-特性名称”。
条件注释与类选择器结合

<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]>    <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>    <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->

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

条件注释
条件注释用于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。使用了条件注释的页面在IE9中可正常工作，但在IE10中无法正常工作。 IE10不再支持条件注释。
IE Hack
IE Hack针对IE浏览器的不同版本去写不同的CSS，让它能在这些浏览器中得到我们想要的页面效果。常用方法：CSS属性前缀法、选择器前缀法以及IE条件注释法。
js 能力检测
js 能力检测使用js检测浏览器支持的属性，以便展示效果。目标不是识别特定的浏览器，而是识别浏览器的能力。
html5shiv.js
html5shiv.js通过使用html5shiv.js让IE9以下版本浏览器支持所有的HTML5标签。
respond.js
respond.jsrespond.js让不支持css3 Media Query的浏览器包括IE6-IE8支持查询。
css reset
css resetcss reset(css重置、清除css样式)重置样式，清除浏览器默认样式。
normalize.css
normalize.cssnormalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。
Modernizr
ModernizrModernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。
postCSS
PostCSS可以直观的理解为：它就是一个平台；PostCSS提供了一个解析器，它能够将CSS解析成抽象语法树（AST）；通过在PostCSS这个平台上，能够开发一些插件，来处理CSS，比如热门的：autoprefixer；能够使用JavaScript来开发插件。