一.什么是CSS hack？
不同浏览器（Chrome，Firefox...）或者同一浏览器的不同版本（IE6，IE7）对同一个css样式表的解析不同造成了页面展示效果不同，为了使不同的浏览器也能展现出同一种效果就产生了CSS hack
CSS hack的三种写法
1.css属性前缀法
<pre>
.box{
color: red;
_color: red; //兼容ie6
*color: red; //兼容ie67
color: red; //兼容所有ie
}
</pre>
2.选择器前缀法
<pre>
*html{}只对IE6生效/
+html{}/只对IE7生效
</pre>
3.IE条件注释法
<pre>
</pre>
4.常见的兼容
- inline-block >=ie8
- min-width || max-height >=ie8
- :before || :after >=ie8
- :hover >=ie7
- background-size >=ie9
- border-radius >=ie9
- box-shadow >=ie9
- transform >=ie10
二.浏览器兼容思路
1.根据产品和成本的角度考虑是否要做兼容
2.兼容要做到什么程度，让哪些浏览器兼容哪些效果
3.根据兼容需求选择合适工具（html5shiv.js、respond.js、css reset、normalize.css、Modernizr
postCSS）
三.浏览器兼容写法
| 浏览器名称 | css的前缀 |
|---|---|
| Firefox | -moz- |
| Opera | -o- |
| IE | -ms- |
| Chrome&Safari | -webkit- |
四.相关工具/名词解释
1.条件注释
<pre>
//注释开始
<script>alert(1);</script> //如果不是IE则弹框1
//注释结束
</pre>
2.IE Hack
| 例子 | 解释 |
|---|---|
[if IE] |
IE浏览器 |
[if !IE] |
非IE浏览器 |
[if lt IE 9] |
IE版本低于9 |
[if lte IE 8] |
IE版本低于等于8 |
[if gt IE6] |
IE版本大于6 |
[if gte IE 9] |
IE版本大于等于9 |
3.js 能力检测
能力检测主要是用来识别浏览器的能力
<pre>
if (object.propertyInQuestion){
//使用object.propertyInQuestion
}
</pre>
例子：
<pre>
function getElement(id){ //检测浏览器是否支持document.getElementById
if (document.getElementById){
return document.getElementById(id);
}else if (document.getAll){
return document.getAll[id];
}else{
throw new Erroor("No way to retrieve element !");
}
}
</pre>
4.html5shiv.js
通俗的讲就是某些低版本的浏览器本来不能解析html5标签，在引用了html5shiv后，浏览器可以解析html5标签
5.Respond.js
Respond.js用来为ie6~8等一些其他不能使用CSS3 Media Queries的浏览器提供媒体查询（max-width，maxheight）
6.css reset
因为早期的浏览器支持和理解的CSS规范不同，导致渲染页面时效果不一致，会出现很多兼容性问题，所以重置近乎全部的样式来达到清除默认样式
7.normalize.css
normalize相比较css reset的改进
1.保护了浏览器的默认样式，没有全部清除样式
2.一般化的样式：为大部分HTML元素提供
3.修复浏览器自身的bug并保证各浏览器的一致性
4.优化CSS可用性
8.Modernizr
Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。通过这个库我们可以检测不同的浏览器对于HTML5特性的支持情况。Modernizr在页面加载时快速运行来检测功能；之后它会创建一个保存检测结果的JavaScript对象，然后为你页面中的html标签上添加一系列class属性来接通你的CSS。
9.postCSS
PostCSS 是使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等。PostCSS 可以作为预处理器使用，类似：Sass, Less 和 Stylus。简而言之，PostCSS是CSS变成JavaScript的数据，使它变成可操作。PostCSS是基于JavaScript插件，然后执行代码操作。PostCSS自身并不会改变CSS，它只是一种插件，为执行任何的转变铺平道路。
网友评论