一、什么是 CSS hack
如我们所见，浏览器种类是很多的，有 Chrome、FireFox、IE、国产浏览器等等，每个浏览器甚至同一浏览器的不同版本对页面渲染标准、样式识别都不一样，所以，开发者为了给不同的浏览器展示同一种页面效果或者完整效果，就需要对这些情况进行适配。主要是利用一些浏览器的 BUG 或者 样式前缀来达到效果。
参考： CSS 滤器 | WIKI
二、谈一谈浏览器兼容的思路
1. 要不要做
首要要明确用户受众群体，像政府、银行或者一些传统的行业，内部使用的电脑还是
Window XP，所以此时就需要考虑低版本的 IE 浏览器的兼容问题，明确在低版本 IE(IE6、IE7)的 hack 写法，JS 的一些写法。然后是成本问题，解决兼容问题，需要用各种 hack 来处理，所以增加了开发成本，假如成本足够，而且又不想丢失低版本浏览器用户，那就可以做兼容处理。
2. 要做到什么程度
浏览器种类和对应的浏览器版本都非常多，如果不是硬性要求，那么在相对久远的浏览器版本就可以不必适配兼容性了，因为本身用户已经很少，并不值得投入过多精力。
3. 如何做
- 兼容框架
可以使用一些别的公司封装好的框架，里面已经为我们封装好兼容性的解决方案，可直接使用，如：jQuery。
- 兼容工具
一般都是一些处理特定兼容性的工具，如： html5shiv.js、respond、CSS Reset、normalize.css、Modernizr
- JS 转换样式工具
- 渐进增强
针对低版本开发，保证最基本功能，再逐渐提升，为高版本浏览器的用户提供更好的交互。
- 优雅降级
一开始就构建了完整的功能，再根据浏览器做兼容。
参考： 渐进增强与优雅降级的区别 | Stack Overflow
三、列举5种以上浏览器兼容的写法
1. 前缀样式
为样式添加特定前缀，会限定仅该指定浏览器内核才能识别该样式。
p {
color: #000; /* 段落在忽略下面所有规则的浏览器中显示为黑色 */
-moz-color: #F00; /* 段落在 Gecko 浏览器中显示为红色 */
-webkit-color: #00F; /* 段落在 Webkit 浏览器中显示为蓝色 */
-khtml-color: #0F0; /* 段落在 KHTML 浏览器中显示为绿色 */
-xv-color: #FF0; /* 段落在 Presto 浏览器中显示为黄色 */
}
2. 下划线 hack
IE 6 及以下版本可以识别以下划线开头的样式，但其他版本并不能识别（还可以识别其他字符，但主要用下划线）
#elem {
width: [W3C 模型宽度];
_width: [BorderBox 模型];
}
3. 星号 hack
IE 7 及以下版本可以识别一些特定字符，这里也主要用星号，如下：
#elem {
width: [W3C 模型宽度];
*width: [BorderBox 模型];
}
4. 子选择器 hack
IE 6 及以下版本不支持子选择器
>，如
/* IE 6 下颜色没变化 */
html > body p { color: blue; }
5. 条件注释
不同版本的 IE 浏览器对 HTML 注释的识别不一样，如：
<head>
<title>测试</title>
<link href="all_browsers.css" rel="stylesheet" type="text/css" />
<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if !lt IE 7]> <![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
<link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>
四、以下工具/名词是做什么的
- 条件注释
不同版本的 IE 浏览器对 HTML 注释的识别不一样，使用条件注释可以为不同版本 IE 加载不同的 CSS 样式。
- IE Hack
很多兼容问题，其实就是 IE 浏览器的兼容问题，所以 IE hack 就是根据当前版本的 IE BUG 来处理兼容性问题。
参考： 区分 IE8/IE7/IE6 以及其他浏览器-CSS | 张鑫旭
- js 能力检测
不同浏览器对 JS 的支持程度不同，所以在使用该 JS 的方法之前，可以先判断一下当前浏览器是否有该方法，但有些工具或框架可以为我们做这种事，如 jQuery
- html5shiv.js
为低版本浏览器识别新 HTML 5 标签的解决方案
- respond.js
为响应式的媒体查询
@media提供降级方案
- css reset
为所有浏览器统一、初始化样式
- normalize.css
更优质的 CSS Reset 方案
- Modernizr
用来检测当前浏览器所支持的 HTML 5 和 CSS 3 新特性。
- postCSS
通过 JS 来改变 CSS 的一套工具，里面有各种插件，实现各种功能，如自动为样式加前缀、
px单位转换等。
五、一般在哪个网站查询属性兼容性？
- 简单直接点，直接百度或谷歌，兼容问题的坑，前辈们基本上都踩过了，如果没踩过的，恐怕靠我们自己也做不出来。
- Can I Use。直接查询某种样式在各个浏览器、各个版本的支持程度。
网友评论