针对不同的浏览器写出的CSS code就称为CSS hack.
1.HTML头部针对不同浏览器不同引入或语句
<!– 默认先调用正常的样式表 –> <link rel="stylesheet" type="text/css" href="css.css" /> <!–[if lte IE 6]> <!– 如果IE浏览器版本小于等于6,调用ie.css样式表 –> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]–>
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! :就是不等于的意思,跟javascript里的不等于判断符相同。
2.CSS3中常针对不同的浏览器内核添加不同的前缀(W3C标准的放置最后)
-moz-transform: rotate | scale | skew | translate ; /*Mozilla内核浏览器:firefox3.5+*/ -webkit-transform: rotate | scale | skew | translate ; /*Webkit内核浏览器:Safari and Chrome*/ -o-transform: rotate | scale | skew | translate ; /*Opera*/ -ms-transform: rotate | scale | skew | translate ; /*IE9*/ transform: rotate | scale | skew | translate ; /*W3C标准*/
3.针对IE系列不同的浏览器有针对的属性前缀或后缀 (针对所有浏览器的样式要放在最前面,越特殊的越靠后,和上面有有区别)
前缀 |
后缀 |
IE6 |
IE7 |
IE8 |
IE9 |
IE10 |
现代浏览器 |
- |
|
√ |
|
|
|
|
|
+ |
|
|
√ |
|
|
|
|
* |
|
√ |
√ |
|
|
|
|
|
9 |
|
|
|
√ |
√ |
|
|