1. 什么是css hack技术
由于目前不同浏览器以及同一浏览器版本的不同导致同一页面源码显示效果不同，为了解决兼容性问题，满足用户使用体验，在满足大众浏览器的基础上为特殊浏览器编辑只有其所能解析的css，使得所有浏览器显示效果大致一致。
1.1 使用弊端
增加代码复杂度，不易维护
1.2 应用场景
政府项目、学校项目等陈旧设备的开发才使用Hack，而现在的企业项目或电商项目不需要
2. 四大内核和五大主流浏览器
由于浏览器最主要的部分就是浏览器的内核，也称为渲染引擎，主要用来解释网页语法并渲染到网页上，决定了浏览器该如何显示网页内容以及页面的格式信息。同时不同浏览器使用的内核存在不同，而不同内核对网页的语法解释也是不同的。因此熟悉内核以及不同浏览器使用的内核情况对网页开发大有用处。
2.1 四大内核
- Trident（也称IE内核）
- webkit
- Blink
- Gecko
2.2 五大主流浏览器
IE
- 微软公司旗下浏览器，以IE和Windows捆绑的模式向市场扩展份额，因此目前装了Windows系统的电脑都带有IE浏览器。
- Trident内核，也是俗称的IE内核
Firefox
- Mozilla公司旗下浏览器
- Gecko内核，俗称Firefox内核
Chrome
- google旗下的浏览器
- 统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核
Safari
- 苹果公司旗下的浏览器
- Webkit内核
Opera
- 挪威Opera Software ASA公司旗下的浏览器
- 最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
注: 五大浏览器采用的都是单内核，而随着浏览器的发展现在也出现了双内核。像360浏览器、QQ浏览器都是采用双内核，具体如下：
- 360浏览器、猎豹浏览器内核：IE+Chrome（Blink）内核
- 搜狗、QQ浏览器：Trident(兼容模式) + Webkit（高速模式）
- 百度浏览器：IE（Trident）内核
- 2345浏览器内核：最开始是IE(Trident)内核，现在为：IE+Chrome内核
3. css hack分类以及使用
3.1 属性前缀法
- CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果
用法
hack 写法 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q) IE9(S) IE9(Q) IE10(S) IE10(Q) * *color Y Y Y Y N Y N Y N Y + +color Y Y Y Y N Y N Y N Y - -color Y Y N N N N N N N N _ _color Y Y N Y N Y N Y N N # #color Y Y Y Y N Y N Y N Y \0 color:red\0 N N N N Y N Y N Y N \9\0 color:red\9\0 N N N N N N Y N Y N !important color:blue !important;color:green; N N Y N Y N Y N Y Y 注释：S表示标准模式，Q表示兼容模式
用例（不考虑兼容模式下）
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>practice</title> <style> p { *color: red; } </style> </head> <body> <p>yangshi</p> </body>
只有当浏览器为IE6/7标准模式下字体颜色显示为红色，其他浏览器及其他IE版本不显示。即当某些特定浏览器显示效果因为版本原因需要特殊设置时使用。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>practice</title> <style> p { color: red !important; color: green; } </style> </head> <body> <p>yangshi</p> </body>这个属性还是用的挺多的，由于IE6标准模式下不支持，因此以上情况IE6版本字体颜色为绿色，其他IE版本以及其他浏览器由于支持!import属性，因此不会被重写的color:green；覆盖掉。
3.2 选择器前缀法
- 针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack
- 网上资源图
用例：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>practice</title> <style> *html p { color: green; } </style> </head> <body> <p>yangshi</p> </body>以上代码只对IE6有效，其他浏览器不显示
3.3 条件注释法（只对IE有效，且只在IE９包括IE9以下得版本有效）
语法：
<!--只在IE９包括IE9以下得版本有效--> <!--[if IE]> 这段文字只在IE浏览器中可见 <![endif]--> <!--只在IE8版本有效--> // 其中 if IE num 表示 当IE版本满足IE num 时成立 <!--[if IE 8]> 这段文字只在IE8浏览器中可见 <![endif]--> <!--只在IE8及以上版本有效--> // 其中 if gte IE num 表示IE版本满足大于等于IE num时成立 <!--[if gte IE 8]> // gte表示大于等于，gt表示大于 这段文字只在IE8(包括)及以上浏览器中可见 <![endif]--> <!--除了IE8版本以外得其他版本（此处表示ie9以及以下得其他版本）有效--> <!--[if ! IE 8]>// if ! IE num 表示IE版本满足不等于IE num时成立，!表示逻辑非 这段文字只在除IE8以外的其他浏览器中可见 <![endif]--> <!--只在IE8版本有效--> <!--[if IE 8]> 这段文字只在IE8浏览器中可见 <![endif]-->用例：
html中使用
<body> <!--只在IE浏览器中有效--> <!--[if IE ]> <h2>这段文字只在非IE浏览器中可见</h2> <![endif]--> </body>在Chrome等其他浏览器打开时不会出现以上文字，只有当IE9及以下的版本打开才会出现当前文字
css中使用
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>practice</title> <!--[if IE]> <style> p { color: #990011; } </style> <![endif]--> </head> <body> <p>yangshi</p> </body>在Chrome等其他浏览器打开时文字不会变色，只有当IE9及以下的版本打开文字才会变色
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。