CSS hack总结

1、源代码:

.hd_bg{ 
background:red; 
background:green\0; 
width:100%; 
height:90px
}

IE8和IE9显示的为绿色,其他的为红色,

所以属性后加“\0”只能被IE8和IE9识别

选择器hack:

2、源代码:

*html.color{
color:green;
background:url(../images/014304_btn_bg.gif) no-repeat; 
width:107px; 
height:37px
}

.color{
color:black
}

只有IE6的字体颜色改成绿色并显示背景图片。

所以* html只能被IE6识别。

3、源代码:

*:+html .color{
color: green;
background:url(../images/014304_btn_bg.gif) no-repeat; 
width:107px; 
height:37px
}

.color{
color:black
}

只有IE7显示字体颜色为绿色并显示背景图片。

所以*:first-child+html只能被IE7识别

4、源代码:

html>body .color{
color: green; 
background:url(../images/014304_btn_bg.gif) no-repeat; 
width:107px; 
height:37px
}

.color{
color:black
}

除了IE6,IE7~9和火狐的字体颜色都显示为绿色并显示背景图片,

所以html>body可以被除IE6以外的浏览器识别

5、源代码:

html>/**/body .color{
color: green; 
background:url(../images/014304_btn_bg.gif) no-repeat; 
width:107px; 
height:37px
}

.color{
color:black
}

只有IE8、IE9和火狐能显示绿色字体和图片

所以html>/**/body只能被IE8、IE9和火狐识别

6、源代码:

:root .color{
color: green; 
background:url(../images/014304_btn_bg.gif) no-repeat; 
width:107px; 
height:37px}

.color{
color:black
}

只有IE9和火狐显示了绿色字体和图片

所以:root可以被IE9和火狐识别

7、源代码:

@-moz-document url-prefix() {
.b{
color:#0F0; 
background:url(../images/014304_btn_bg.gif) no-repeat; 
width:107px; 
height:37px
}
}

只有火狐的字体颜色显示为绿色,并显示图片

所以@-moz-document url-prefix() {}只能被火狐识别

总结:

“*”可以被IE6和IE7识别。

“_”只能被IE6识别。“+”只能被IE7识别

IE6对于!important存在bug。(IE不识别!important)

属性后门加“\9”只能被IE浏览器识别。

所以属性后加“\0”只能被IE8和IE9识别

所以* html只能被IE6识别。

所以*:first-child+html只能被IE7识别

所以html>/**/body只能被IE8、IE9和火狐识别

所以html>body可以被除IE6以外的浏览器识别

所以:root可以被IE9和火狐识别

@-moz-document url-prefix() {}只能被火狐识别

 

Tonitech版权所有 | 转载请注明出处: http://www.tonitech.com/1637.html

发表评论