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 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![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 |
| 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)条件注释结合类选择器整体优化。
<!DOCTYPE html>
<html dir="ltr" lang="en-US" class="no-js">
(5)利用Modernizr工具
运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例:canvas,websockets），不支持的特性显示的class是“no-特性名称”。
