浏览器兼容 4 CSS hack

浏览器兼容 4 CSS hack

使用hacker可以把浏览器分为3类：IE6；IE7；其他（IE8 chrome ff safari opera等）
◆IE6认识的hacker是下划线_和星号*
◆IE7认识的hacker是星号*

比如这样一个CSS设置：
height:300px; *height:200px; _height:100px; 
IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；

hack速查表

建议：以标准浏览器为准书写代码，如遇到兼容问题，尝试其他方法解决问题，在万不得已怕情况下，采用HACK解决。

以下是我总结的HACK书写方法:

浏览器：仅限IE6+，FF，safari,chrome,opera;(截止到2011.10.12非IE均为最新版本)。

测试环境：windows系统;

DOCTYPE: .

标志符

示例

IE6

IE7

IE8

IE9

FF

OP

SA

CH

*

.eq {*color:#000;}

Y

Y

N

N

N

N

N

N

_

.eq {_color:#000;}

Y

N

N

N

N

N

N

N

+

.eq {+color:#000;}

Y

Y

N

N

N

N

N

N

-

.eq {-color:#000;}

Y

N

N

N

N

N

N

N

>

.eq {>color:#000;}

Y

Y

N

N

N

N

N

N

\0

.eq {color:#000\0;}

N

N

Y

Y

N

Y

N

N

\9

.eq {color:#000\9;}

Y

Y

Y

Y

N

N

N

N

\9\0

.eq {color:#000\0;}

N

N

N\Y

Y

N

N

N

N

:root .xx{xxx:xxx\9;}

:root .eq {color:#a00\9;}

N

N

N

Y

N

N

N

N

*+

.eq {*+color:#000;}

Y

Y

N

N

N

N

N

N

*-

.eq {*-color:#000;}

Y

N

N

N

N

N

N

N

*html

*html .eq {color:#000;}

Y

N

N

N

N

N

N

N

*+html

*+html .eq {color:#000;}

N

Y

N

N

N

N

N

N

html*

html* .eq {color:#000;}

Y

Y

N

N

N

N

N

N

[;

.eq {color:red;[;color:blue;}

Y

Y

N

N

N

N

Y

Y

html>body

html>body .eq {color:blue;}

N

Y

Y

Y

Y

Y

Y

Y

html>/**/body

html>/**/body .eq {color:blue;}

N

N

Y

Y

Y

Y

Y

Y

html/**/>body

html/**/>body .eq {color:blue;}

N

Y

Y

Y

Y

Y

Y

Y

@media all and (min-width:0px){}

@media all and (min-width:0px){.eq {color:#000;}}

N

N

N

Y

Y

Y

Y

Y

*:first-child+html

*:first-child+html .eq {color:blue;}

N

Y

N

N

N

N

N

N

*:first-child+html{} *html

*:first-child+html{} *html .eq {color:blue;}

Y

N

N

N

N

N

N

N

@-moz-document url-prefix(){}

@-moz-document url-prefix(){ .eq {color:blue;}}

N

N

N

N

Y

N

N

N

@media screen and (-webkit-min-device-pixel-ratio:0){}

@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}

N

N

N

N

N

N

Y

Y

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){}

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}

N

N

N

N

N

Y

N

N

body:nth-of-type(1)

body:nth-of-type(1) .eq {color:blue;}

N

N

N

Y

Y

Y

Y

Y

标志符

示例

IE6

IE7

IE8

IE9

FF

OP

SA

CH

FF:firefox; OP:opera; SA:safari; CH:chrome; Y代表支持，N代表不支持。

注意事项：

①由于各浏览器更新神速，所以有些HACK可能会有变化，所以请大家注意。

② [;此种方式会影响后续样式，不可取。

③ \9\0并非对所有属性都能区分IE8和IE9.比如：background-color可以，但background不可以，还有border也不可以。所以在实际用时要测试下。

④当同时出现\0; *; _;时，推荐将\0写在*和_前面。例如:color:red\0;*color:blue;_color:green;可行，否则IE7和IE6里的效果会失效。但border例外，放在前后都可以。保险起见，还是放在前面。

 

推荐写法：

demo:

.eq {

color:#f00;/*标准浏览器*/

color:#f30\0;/*IE8,IE9,opera*/

*color:#c00;/*IE7及IE6*/

_color:#600;/*IE6专属*/

}

:root .eq {color:#a00\9;}/*IE9专属*/

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:#450;}}/*opera专属*/

@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:#879;}}/*webkit专属*/

@-moz-document url-prefix(){ .eq {color:#4dd;}}/*firefox专属*/