Firefox 浏览器
@-moz-document url-prefix() {
.selector {
property: value;
}
}
支持所有Gecko内核的浏览器 (包括Firefox)
*>.selector { property: value; }
Webkit 内核浏览器
@media screen and (-webkit-min-device-pixel-ratio: 0) {
Selector {
property: value;
}
}
Opera 浏览器
html:first-child>b\ody Selector {property:value;}
IE 浏览器针对不同的版本有不同个Hack方式。
CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。等等
选择器Hack:比如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。等等
方式一:HTML头部引用(if IE)Hack:针对所有IE:<!--[if IE]><!--您的代码--><![endif]-->,针对IE6及以下版本:<!--[if lt IE 7]><!--您的代码--><![endif]-->,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
1. <!--[if !IE]> 除IE外都可识别 <!--<![endif]--> 2. <!--[if IE]> 所有的IE可识别 <![endif]--> 3. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]--> 4. <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]--> 5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]--> 6. <!--[if IE 6]> 仅IE6可识别 <![endif]--> 7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--> 8. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--> 9. <!--[if IE 7]> 仅IE7可识别 <![endif]--> 10. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]--> 11. <!--[if gte IE 7]> IE7以及IE7以上版本可识别<![endif]-->
(2)方式二 类内属性前缀法
- “-″减号是IE6专有的hack
- “\9″ IE6/IE7/IE8/IE9/IE10都生效
- “\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
- “\9\0″ 只对IE9/IE10生效,是IE9/10的hack
(3)CSS hack方式三:选择器前缀法
IE 9
:root Selector {property: value\9;}
IE 9-
Selector {property: value\9;}
IE 8
Selector {property: value/;}
或:
@media \0screen {
Selector {property: value;}
}
IE 8 +
Selector {property: value\0;}
IE 7
+html Selector{property:value;}
或:
*:first-child+html Selector {property:value;}
IE 7-
Selector {*property: value;}
IE 6
Selector {
_property: value;
}
或者:
*html Selector {
property: value;
}
例如:
div{
background
:
green
;
/*forfirefox*/
*
background
:
red
;
/*forIE6*/
(bothIE
6
&&IE
7
)
}
background
:orange;*
background
:
green
;
_background
:
blue
;
background
:orange;*
background
:
green
!important
;*
background
:
blue
;