一.什么是 CSS hack？
由于不同厂商的浏览器（比如Internet Explorer,Safari,Mozilla Firefox,Chrome等），或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。我们把这个针对不同的浏览器/不同版本写相应的CSS的过程，叫做CSS hack。
二.谈一谈浏览器兼容的思路
- 要不要做
- 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
- 成本的角度 (有无必要做某件事)
- 做到什么程度
- 让哪些浏览器支持哪些效果
- 如何做
- 根据兼容需求选择技术框架/库( jquery )
- 根据兼容需求选择兼容工具( html5shiv.js、respond.js、css reset、 normalize.css、Modernizr )
- postCSS
- 条件注释、CSS Hack、js 能力检测做一些修补
- 渐进增强和优雅降级
渐进增强(progressive enhancement):针对低版本浏览器进行构建页面，保证最基本的功能然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
四.列举5种以上浏览器兼容的写法
- 合适的框架
1.Bootstrap (>=ie8)
2.jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
3.Vue (>= ie9)
4.… - 常见属性的兼容情况
- inline-block: >=ie8
- min-width/min-height: >=ie8
- :before,:after: >=ie8
- div:hover: >=ie7
- inline-block: >=ie8
- background-size: >=ie9
- 圆角: >= ie9
- 阴影: >= ie9
- 动画/渐变: >= ie10
CSS hack方式1：条件注释法
这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。
语法：
<!--[if condition]> HTML <![endif]-->
<!--[if !condition]><!--> HTML <!--<![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
范例：
只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
CSS hack方式2：类内属性前缀法
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。
.test {
background-color:red; /* All browsers */
background-color:blue !important; /* All browsers but IE6 */
*background-color:black; /* IE6, IE7 */
+background-color:yellow; /* IE6, IE7*/
background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */
background-color:purple\0; /* IE8, IE9, IE10 */
background-color:orange\9\0; /*IE9, IE10*/
_background-color:green; /* Only works in IE6 */
}
CSS hack方式3：浏览器私有前缀法
-o 对应 opera 浏览器
-ms 对应 IE 浏览器
-moz 对应 firefox 浏览器
-webkit 对应 safari，chrome 浏览器
范例：
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
CSS hack方式4：选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在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有效
CSS hack方式5：CSS3选择器结合JavaScript的Hack
JavaScript代码:
function test() {
var htmlObj = document.documentElement;
htmlObj.setAttribute('data-useragent',navigator.userAgent);
htmlObj.setAttribute('data-platform', navigator.platform );
}
CSS3匹配代码：
html[data-useragent*='MSIE 10.0'] #id {
color: #F00;
}
五.以下工具/名词是做什么的
- 条件注释
条件注释是一种安全地区分 IE浏览器版本的语法，且被认为是取代针对 IE css hack的首选办法。 - IE hack
针对 IE浏览器编写兼容性 CSS样式，如 IE条件注释，选择器前缀，属性前缀。 - js能力检测
检测浏览器支持的属性，以便展示效果 - html5shiv.js
在使用html5的时候，有些浏览器不支持h5的一些新特性和标签，需要用这个html5shiv.js来模拟这些标签。 - respond.js
在做响应式网页的时候一些浏览器不支持媒体查询等css3新特性，使用respond.js来兼容。 - css reset
通过重新定义标签样式“覆盖”浏览器的CSS默认属性。 - normalize.css
Normalize.css是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。
它可以：- 保留有用的默认值，不同于许多 CSS reset 的简单粗暴。
- 标准化的样式，适用范围广的元素。
- 纠正错误和常见的浏览器的不一致性。
- 一些细微的改进，提高了易用性。
- 使用详细的注释来解释代码。
- modernizr
Modernizr是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。
Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性，这是处理渐进增强的完美方案。
Modernizr 会在页面加载后立即检测特性，然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整CSS 的 class 名。 - postCSS
PostCSS 是使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等。PostCSS是CSS变成JavaScript的数据，使它变成可操作。PostCSS是基于JavaScript插件，然后执行代码操作。PostCSS自身并不会改变CSS，它只是一种插件，为执行任何的转变铺平道路。
