什么是 CSS hack
Hack是针对不同浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的CSS CODE的过程就叫做CSS Hack。然后将Hack放在浏览器特定的CSS文件中，让符合条件的浏览器去解析这些代码，符合条件的就解析，不符合的就不解析，从而达到所需要的页面渲染效果。总的一句话来说就是使用CSS Hack将会使你的CSS代码部分失去作用，然后借助条件样式，使用其原CSS代码在一些浏览器解析，而CSS Hack代码在符合条件要求的浏览器中替代原CSS那部分代码。
谈一谈浏览器兼容的思路
主要从三个方面去考虑：
要不要去做？主要从产品的角度和成本的角度去考虑；产品的角度来说我们要考虑清楚产品的使用群体，以及受众的浏览器比例，从中分析我们需要效果优先还是功能优先。从成本的角度分析，就是我们做某个功能值不值得，有没有必要，付出和收获是否不成比例。
如果做，做到什么程度？具体到需要让那些浏览器支持哪些效果，在不同的浏览器侧重点也不同。例如：渐进增强和优雅处理。渐进增强是指针对低版本浏览器进行页面构建，保证最基本的功能，在这基础上补充一些高级浏览器的效果，功能，交互；优雅降级：针对高级浏览器，构建完整的功能，再针对低版本的浏览器去做一些兼容。
如何去做？根据兼容的需求选择不同的技术或框架（比如jQuery）Bootstrap;jQuery 1.~(>=ie6),jQuery 2.~(>=ie9);Vue(>=ie9)等
根据兼容需求选择兼容工具(html5shiv.js , respond.js , css.reset , normalize.css , Modernizr)postCSS条件注释 CSS Hack js能力检测做一些修补。
列举5种以上浏览器兼容的写法
条件注释：
<!--[if IE 6]> <p>You are using Internet Explorer 6.</p> <![endif]-->
<!--[if !IE]><!--> <script>alert(1);</script> <!--<![endif]-->
<!--[if IE 8]> <link href="ie8only.css" rel="stylesheet"> <![endif]-->
! [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
CSS Hack
CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。常见的Hack写法：
.box{
//属性前缀法
color: red; _color: blue; /*ie6*/ *color: pink; /*ie67*/ color: yellow\9; /*ie/edge 6-8*/}
//选择器前缀法
.ie7 .clearfix{ zoom: 1;}
//IE条件注释法
<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]–->
<!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]-->
属性兼容问题
常见的属性兼容情况如下：
inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圆角: >= ie9
阴影: >= ie9
动画/渐变: >= ie10
常见处理范例如下：
.clearfix:after{content: '';display: block;clear: both;}.clearfix{zoom: 1; / 仅对ie67有效 /}
.target{display: inline-block;display: inline;*zoom: 1;}
以下工具/名词是做什么的
条件注释
条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。（IE10不再支持条件注释）。
IE Hack
专门准对IE浏览器不同版本间的兼容性问题的处理，使之能够渲染出想要的效果。
js 能力检测
是指js中兼容性问题的一些封装。通过js封装函数或对象来解决浏览器的兼容问题。
html5shiv.js
用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。使用Javascript来使不支持HTML5的浏览器支持HTML标签。利用脚本document.createElement(“”)创建对应的脚本，CSS选择器便可正确应用到该标签。
respond.js
Respond.js 是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计。（Responsive Web Design）
css reset
HTML标签在浏览器中都有默认的样式，例如p标签有上下边距，strong标签有字体加粗样式等。不同浏览器的默认样式之间存在差别，例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容问题，影响开发效率。解决方法其中之一是开始就将浏览器的默认样式全部覆盖掉，这就是CSS reset。
normalize.css
Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。它可以保留有用的默认值，不同于许多 CSS 的重置,其标准化的样式，适用范围广的元素。纠正错误和常见的浏览器的不一致性。一些细微的改进，提高了易用性。使用详细的注释来解释代码。
Modernizr
Modernizr是一个检测用户浏览器HTML5和CSS3能力的JavaScript库。Modernizr在页面加载时快速运行来检测功能；之后它会创建一个保存检测结果的JavaScript对象，然后为你页面中的html标签上添加一系列class属性来接通你的CSS。Modernizr支持大量的测试和可选地包括YepNope.js来视情况加载外部的js和css资源。
postCSS
PostCSS 是使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等。PostCSS是CSS变成JavaScript的数据，使它变成可操作。PostCSS是基于JavaScript插件，然后执行代码操作。PostCSS自身并不会改变CSS，它只是一种插件，为执行任何的转变铺平道路。
