-
什么是 CSS hack
由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果，这个就叫CSS hack。
-
谈一谈浏览器兼容的思路
就是当你做一款产品时，你就要考虑这个网站是不是要做浏览器的兼容，如果需要做兼容的话，它到底要兼容到ie几（因为一般来说pc网站的兼容就是ie浏览器，国产浏览器就是chrome和ie内核，而firefoxs及其他的浏览器会自动升级就相当于它是最新的）。
如果要兼容的话，如果去做？
-
要不要做
- 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
- 成本的角度（有无必要做某件事）
-
做到什么程度
- 让哪些浏览器支持哪些效果
如何做
根据兼容需求选择技术框架/库（jquery）
根据兼容需求选择兼容工具（html5shiv.js、respond.js、css reset、normalize.css、Modernizr）
条件注释、CSS Hack、is能力检测做一些修补
-
列举5种以上浏览器兼容的处理细节
- 双倍边距
如果你有一个分配有左/右边距的浮动元素，IE6会使得边距双倍化。比如，margin-left: 5px；将会变成10px。
可以通过对浮动元素添加display:inline来解决这个问题
div#content {
float:left;
width:200px;
margin-left:10px;
display:inline;
}
- IE的最小高度
IE忽略min-height属性，可以用下面的hack来修复它。
selector {
min-height:500px;
height:auto !important;
height:500px;
}
- 禁用IE默认的垂直滚动条
默认情况下，即使内容适合窗口大小，IE6 和 IE7也会显示垂直滚动条。可以使用overflow:auto，让滚动条只在你需要时出现。
html {
overflow: auto;
}
- IE6、IE7兼容inline-block
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
- 清除浮动
.clearfix:after{
content: ' ';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 仅对ie67有效 */
}
-
以下工具/名词是做什么的
条件注释
条件注释（conditional comment）是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
<!--[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]-->
使用了条件注释的页面在Windows Internet Explore 9 中可正常工作，但是在Internet 10 中无法正常工作。IE10不再支持条件注释
- IE Hack
通过CSS属性前缀法、选择器前缀法以及IE条件注释法写只有IE浏览器能识别的css样式。
例子：
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
js 能力检测
就是看浏览器是否支持当前对象的属性或是方法，先通过获得页面文本内容的方式来了解兼容性，并封装函数或对象以解决此类问题。html5shiv.js
用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。respond.js
Respond.js 是一个快速、轻量的 polyfill（用于实现浏览器并不支持的原生API的代码。），用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计。（让IE6-8支持CSS3 Media Query）css reset
每个浏览器都有一些自带的或者共有的默认样式，会造成一些布局上的困扰，css reset的作用就是重置这些默认样式，使样式表现一致，比如*{margin:0;padding:0}就是一个最简单的css reset。normalize.css
Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。
参考Modernizr
Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。
参考1
参考2postCSS
它可以被理解为一个平台，可以让一些插件在上面跑
它提供了一个解析器，可以将CSS解析成抽象语法树
通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer
参考1
参考2
文章著作权归饥人谷_sunny和饥人谷所有，转载须说明来源
