浏览器兼容性

---

CSS hack

因为浏览器是由多个公司生产的。目前市面上，浏览器使用情况也不一样。同时，不同的浏览器对css解析的规则不一样。所以同一份css代码会渲染出不同的解析。所以需要对不同的浏览器编写不同的css、这是就是css hack。

---

浏览器兼容的思路

(1)考虑产品对象，以及浏览器的使用的情况。确定是效果优先还是功能优先。
(2)考虑成本。有没有必要兼容低版本。
(3)需要兼容什么浏览器，以及兼容的版本。
(4)可以选择渐进增强或者优雅降级。
(5)根据兼容的需求选择技术框架。
(6)根据兼容需求选择兼容工具html5shiv.js、respond.js、css reset、Modernizr、postCSS
(7)条件注释、CSS Hack、js 能力检测做一些修补。

---

5种浏览器兼容的写法

(1)条件注释

项目	范例	说明
！	[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
1	[if (IE 6)	(IE 7)] IE6或者IE7

(2)属性选择器

box{
color: red;
_color: blue; /ie6/
color: pink; /ie67/
color: yellow\9; /ie/edge 6-8*/
}
(3)
*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有效等等

(4)条件注释结合类选择器整体优化。

(5)利用Modernizr工具
运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例:canvas,websockets），不支持的特性显示的class是“no-特性名称”。

---

网站查询属性兼容性

http://caniuse.com/](http://caniuse.com/