1.什么是 CSS hack
不同厂家的浏览器，或者同一厂商的不同版本的浏览器对css的解析认识可能存在差别，因此呈现不同的页面效果。为了使不同的浏览器都呈现我们想要的结果，我们就需要针对不同的浏览器写不同的css。
简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
2.谈一谈浏览器兼容的思路
2.1为什么产生浏览器兼容的问题？
不同的厂商浏览器互为竞争对手，各自有各自的规范和实现方式，这也是w3c应运而生的一个重要原因。
同一厂商的浏览器跟随时代的发展，推旧出新，旧的浏览器存在很多的bug；新的浏览器拥有更多旧浏览器没有（不支持）的功能。
2.2解决浏览器兼容的思路
- 要不要考虑兼容问题？
产品考虑（产品受众，受众中使用各种浏览器的占比情况，基本功能优先还是效果优先）
成本考虑（有无必要）
- 兼容到什么程度？
需要兼容哪些浏览器，以及浏览器的哪些版本
- 如何解决兼容问题？
根据兼容需求选择技术框架/库
Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9)
根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
postCSS
条件注释、CSS Hack、js 能力检测做一些修补
3.列举5种以上浏览器兼容的写法
- css hack的三种形式
- （类内）属性前缀法
IE6能识别 <code>* _</code>
IE7能识别 <code>* </code>
“-″减号是IE6专有的hack
“\9”IE6~IE10都生效
“\0” IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0” 只对IE9/IE10生效，是IE9/10的hack
- （类内）属性前缀法
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie 6-10*/
}```
- 选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
>\*html
\*前缀只对IE6生效
\*+html
*+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
- IE条件注释法（HTML条件注释hack）
>**！**
[if !IE] 非IE
** |**
[if (IE 6)|(IE 7)] IE6或者IE7
**lt (less than)**
[if lt IE 5.5] 小于IE 5.5
**lte(less than equl)**
[if lte IE 6] 小于等于IE6
** gt (greater than)**
[if gt IE 5] 大于 IE5
** gte (greater than equl)**
[if gte IE 7] 大于等于IE7
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
#####4.以下工具/名词是做什么的
- 条件注释
IE中的条件注释（Conditional comments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法。
条件注释只能用于IE5以上。
条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
- IE Hack
针对不同版本的IE浏览器写的css，从而使各个版本IE能够顺利渲染页面。
- js 能力检测
能力检测又称特性检测。能力检测的目的不是识别具体的浏览器，而是识别浏览器的能力。
- html5shiv.js
通过模拟标签解决不支持HTML5新标签，新特性的浏览器的兼容问题。IE9以下的IE版本不支持HTML5
- 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
保留有用的默认值，不同于许多 CSS 的重置
标准化的样式，适用范围广的元素。
纠正错误和常见的浏览器的不一致性。
一些细微的改进，提高了易用性。
使用详细的注释来解释代码。
- Modernizr
传统浏览器目前不会被完全取代，令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为解决这一难题应运而生，作为一个开源的 JavaScript 库，Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况。 Modernizr 并非试图添加老版本浏览器不支持的功能，而是令你通过创建可选风格配置修改页面设计。 它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能。
- postCSS
PostCSS 可以直观的理解为一个平台，通过在 PostCSS 这个平台上，我们能够开发一些插件，来处理我们的CSS
5.一般在哪个网站查询属性兼容性？
https://caniuse.com/