CSS hack
2018-01-12 本文已影响17人
尚有
CSS hack是为了根据不同浏览器或者同一浏览器的兼容或者某些特性引起的页面展示效果不达人愿而使用的一种技术
大致分为三类：
1、选择器前缀法： 例如 IE6能识别div .div{}，IE7能识别+div .div{}或者*:first-child+div .div{}。
2、属性前缀法：IE6能识别""和" * "，IE7能识别" * "，但不能识别""，IE6~IE10都认识"\9"，但firefo对前述三个都不认识
3、IE条件注释法：，针对IE6及以下版本： 。这类Hack既可以调节样式，也可以执行内部的判断语句。
选择器前缀法
*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有效
属性前缀法
| 编号 | hack | 例子 | 适用浏览器 |
|---|---|---|---|
| 1 | * | *color | IE6 及以下版本 IE7 |
| 2 | + | +color | IE6 及以下版本 IE7 |
| 3 | _ | _color | IE6 及以下版本 |
| 4 | - | -color | IE6 及以下版本 |
| 5 | # | #color | IE6-IE10 |
| 6 | \0 | color:#000\0; | IE8和IE10 |
| 7 | \9\0 | color:#000\9\0; | IE9和IE10 |
| 8 | \9 | color:#000\9; | IE6 - IE10 |
IE条件注释法
主要是针对ie浏览器的，通过判断IE浏览器的版本从而给定样式或者判断条件
img.png
