• 公告栏使用li标签,同时你可以使用FontAwesome以及其他HTML语法
  • FontAwesome示例
  • 仅仅凭借信仰跟从就等于盲从To follow by faith alone is to follow blindly@本杰明·富兰克林 (美国开国元勋 物理学家 作家)

使用CSS Hack兼容浏览器

电脑网络 shaobo 30次浏览 4157字 0个评论
一、IE条件注释
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;
}


喜欢 (0)

您必须 登录 才能发表评论!