CSS hank
CSS hank是为了让CSS代码兼容不同浏览器,也可以通过CSS hank为不同的浏览器设置不同的CSS样式。
CSS hank的3种表现形式:
类内部hank
IE6能识别下划线_
和星号*
,但不能识别!important
;
IE7能识别星号*
和!important
,但不能识别下划线_
;
IE8只能识别\0
和!important
;
FF能识别!important
,但不能识别*
;-
减号是IE6专有的hack;\9
IE6/IE7/IE8/IE9/IE10都生效;\0
IE8/IE9/IE10都生效,是IE8/9/10的hack;\9\0
只对IE9/IE10生效,是IE9/10的hack;选择器hank
选择器hank是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行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有效-
IE注释hank
IE注释hank是IE浏览器专有的Hack方式.
只在IE下生效<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
区分各种浏览器
1.区分IE和非IE浏览器
.class{
background:blue;/*IE、非IE都生效*/
background:red \9;/*IE6.7.8.9.10都生效*/
}
2.区分IE6,7,8,FF
.class{
background:blue;/*FF*/
background:red; \9;/*IE8*/
*background:green;/*IE7*/
_background:black;/*IE6*/
}
3.区分IE6,7,FF
.class1{
background:blue;/*FF*/
*background:green;/*IE7*/
_background:black;/*IE6*/
}
.class2{
background:blue;/*FF*/
*background:green !important;/*IE7*/
*background:black;/* IE6可以识别*和_ */
}
4.区分IE7,FF
.class{
background:blue;/* FF可以识别!important,但无法识别* */
*background:green !important;/*IE7*/
}
5.区分IE6,7
.class1{
*background:green;/*IE7*/
_background:black;/*IE6*/
}
.class2{
background:green !important;/*IE7*/
background:black;/* IE6不能识别!important */
}
6.区分IE6,FF
.class{
background:blue;/* FF */
_background:green;/*IE6*/
}