使用CSS Hack兼容浏览器
1）针对某个具体IE版本应用样式表文件
<!– [IE条件注释，适用IE7浏览器] –>
<!– [if IE 7] >
<link href=”image/ie7.css” type=”text/css” rel=”stylesheet” />
<![endif]–>
<!– [IE条件注释，适用IE6浏览器] –>
<!– [if IE 6] >
<style type=”text/css”>
@import url(“ie6.css”);
</style>
<![endif]–>
<!– [IE条件注释，适用IE5.5浏览器] –>
<!– [if IE 5.5000] >
<style type=”text/css”>
@import url(“ie55.css”);
</style>
<![endif]–>
由于IE5.5的版本号有点特殊，定义时应写成IE 5.5000
2）针对所有IE版本应用样式表文件
<!– [IE条件注释，适用IE5及更高版本浏览器] –>
<!– [if IE] >
<style type=”text/css”>
@import url(“ie.css”);
</style>
<![endif]–>
3）针对一定范围IE版本应用样式表文件
如果要实现在一定版本范围内IE浏览器中有效，可以结合lte、lt、gte、gt 和!关键字，指明一个使用范围，详细说明如下：
lte：Less than or equal to 的简写，也就是小于或等于的意思。
lt：Less than 的简写，也就是小于的意思。
gte：Greater than or equal to 的简写，也就是大于或等于的意思。
gt：Greater than 的简写，也就是大于的意思。
!：不等于的意思。
<!– [IE条件注释，适用IE5及更高版本浏览器] –>
<!– [if gte IE 5.5000] >
<style type=”text/css”>
@import url(“gte_ie55.css”);
</style>
<![endif]–>
<!– [IE条件注释，适用IE7以下版本浏览器] –>
<!– [if lt IE 7] >
<link href=”lt_ie7.css” type=”text/css” rel=stylesheet />
<![endif]–>
二、@import规则过滤器
/*仅适用IE 5.x/Windows版本浏览器*/
@media tty{
i{content:”\”;/*” “*/}} @import url(‘ie5x/win.css’); /*;)
}/* */
CSS1不能够识别@media规则，则那些仅能够支持CSS1的浏览器会自动忽略这几行代码。
tty表示终端和电传打字机媒体类型，当前没有设备支持这种媒体类型，符合标准的浏览器会忽略这个规则，如FF、OP等。
功能超前的浏览器会误认为是为i元素定义的样式，由于对转义字符的曲解而认为中间是一堆无意义的字符串。
但是IE 5.x/Windows系列版本浏览器不能够识别转义字符，也不支持tty媒体类型，因此会忽略前面的声明，而执行后半部分的规则。
1）适用IE 5/Windows浏览器的过滤器
/*仅适用IE 5/Windows浏览器*/
@media tty{
i{content:”\”;/*” “*/}}; @import ‘ie5/win.css’; {;}/*”;}
}/* */
2）适用IE 5.5/Windows浏览器的过滤器
/*仅适用IE 5.5/Windows浏览器*/
@media tty{
i{content:”\”;/*” “*/}}@m; @import ‘ie55/win.css’; /*”;}
}/* */
3）适用IE 5/Mac浏览器的过滤器
/*仅适用IE 5/Mac版本浏览器*/
/*\*//*/
@import ” ie5mac.css”;
/**/
4）适用非IE 6/Windows及更低版本浏览器
/*适用非IE 6/Windows及更低版本浏览器*/
@import url(styles.css) all;
5）适用非IE 5.x/Windows系列及更低版本浏览器
/*适用非IE 5.x/Windows系列及更低版本浏览器*/
@import “null?\”\{“;
@import “styles.css”;
@import “null?\”\}”;
6）适用非IE 5/Windows系列及更低版本浏览器
/*适用非IE 5/Windows系列及更低版本浏览器*/
@import”styles.css”;
7）适用非IE 4/Windows版本浏览器
/*适用非IE 4/Windows版本浏览器*/
@import”styles.css”;
三、!important关键字过滤器
/*[!important关键字过滤器]*/
#content{
width:414px !important;
width:400px;
padding:5px;
border-width:2px;
}
FF和OP能够识别!important命令，IE6及更低版本浏览器忽略!important命令。
四、下划线属性过滤器
/*[下划线属性过滤器]*/
#content{
width:400px;
_width:414px;
padding:5px;
border-width:2px;
}
Windows IE 6及更低版本浏览器会忽略下划线。
五、转义属性过滤器
/*[转义属性过滤器]*/
div{
border:solid 1px red;
height:100px;
width:100px;
widt\h:200px;
}
Windows IE 5.x系列及更低版本浏览器会忽略”\”。
注：不要把反斜杠放在数字0-9或字母a-f、n、r、t、v（包括大小写）的前面。
/*[转义属性过滤器]*/
div{
border:solid 1px red;
height:100px;
width:100px;
\width:200px;
}
能隐藏NS 4/Win或NS 4/Mac、IE 5/Mac版本浏览器中的声明。
六、* html选择符过滤器
/*[* html选择符过滤器]*/
* html{/*定义在IE 6及更低版本中显示的字体为灰色*/
color:#666;
}
七、属性选择符过滤器
/*[属性选择符过滤器]*/
div.try{/*适用所有浏览器的样式*/
width:204px;
height:304px;
padding:2px;
}
div[class=try]{/*在非IE 6及更低版本浏览器中覆盖上面定义的宽和高声明，实现盒模型兼容*/
width:200px;
height:300px;
}
八、子对象选择符过滤器
/*子对象选择符过滤器*/
span>p{/*符合标准的浏览器中显示为白色*/
color:#FFF;
}
span{/*IE 6及更低版本浏览器中显示为黑色*/
color:#000;
}
九、相邻选择符过滤器
/*[相邻选择符过滤器]*/
h2 + parag{/*符合标准浏览器中显示为蓝色*/
color:blue;
}
.parag{/*IE 6及更低版本浏览器中显示为红色*/
color:red;
}
十、转义选择符过滤器
/*[转义选择符过滤器]*/
#testElement{/*IE 5.x系列版本浏览器中显示为蓝色*/
color:blue;
}
#te\stElement{/*在非IE 5.x系列版本浏览器中显示为红色*/
color:red;
}
十一、注释反斜杠过滤器
/*[注释反斜杠过滤器]*/
div{
width:774px;
}
/*Hide Code for IE 5/Mac \*/
div{
width:100%;
}
/* End Hide */
十二、隐藏单个声明
1）在IE 6中隐藏声明
/*[在IE 6中隐藏声明]*/
div{
height:200px;
width:200px;
width /**/:400px;
background:#F6F;
}
注：注释在属性的后面，冒号的前面，且与属性名中间隔一个空格。
2）在IE 5.5中隐藏声明
/*[在IE 5.5中隐藏声明]*/
div{
height:200px;
width:200px;
width: /**/400px;
background:#F6F;
}
注：注释在冒号的后面，且与冒号中间隔一个空格。
3）在IE 5和IE 4中隐藏声明
/*[在IE 5和IE 4中隐藏声明]*/
div{
height:200px;
width:200px;
width/* */:400px;
background:#F6F;
}
注：注释在属性名的后面，冒号的前面，且注释中间隔一个空格。
这个过滤器会同时适用Mac系统中的IE 5和IE 4。
十三、隐藏多个声明
/*[在IE 5.5及更低版本浏览器中隐藏声明]*/
div.content{
height:400px;
width:400px;
border:solid 1px blue;
voice-family:”\”}\””;
voice-family:inherit;
height:200px;
width:200px;
border:solid 1px red;
}
IE 5.5及更低版本浏览器中不能够识别voice-family属性，同时错误地解析转义字符，误认为规则到voice-family:”\”}\””;就结束了。
十四、隐藏规则
1）在IE 5和IE 4中隐藏规则
/*[在IE 5和IE 4中隐藏规则]*/
div.content{
height:400px;
width:400px;
background:red;
}
div.content/**/{
background:blue;
}
IE 5和IE 4会隐藏第2个规则。这个过滤器同时适用Mac系统中的IE 5和IE 4。
2）在IE 6及更低版本中隐藏规则
/*[在IE 6及更低版本中隐藏规则]*/
div.content{
height:400px;
width:400px;
background:red;
}
div.content ,[dummy]{
background:blue;
}
IE 6及更低版本中忽略第2个规则。
3）在IE 6及更低版本中隐藏规则
/*[在IE 6及更低版本中隐藏规则]*/
div.content{
height:400px;
width:400px;
background:red;
}
head+body div.content{
background:blue;
}
评论