CSS hank

时间:2021-07-21 15:43:20

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*/
}