Css hack技术
1. css hack的定义:指一种改善css在不同浏览器下表现形式的技巧方法。它利用的是浏览器的bug。
注:css执行的顺序是后一个总是覆盖前一个
2. css的方法
(1)@import 用于IE4的区分(@import IE4不能解析)
例:
@import url(“newstyle.css”)
body{
font-size:14px;/*ie 4 中body的字体为14px*/
}
newstyle.css
body{
font-size:18px;/*ie 4以上浏览器中body的字体为18px*/
}
(2)screen参数 用于IE与Mozila/FireFox的区分
(在css中screen用于指定设备的类型,IE没有设备类型的指定,所以不能解析带该参数的语句)
例:
@import url(“noneIE.css”) screen
(3)/**/注释 用于区分IE5和IE6、FireFox
(不允许空格存在,IE5不能解析该符号的语句)
例:
#content /**/{
color-size:18px; /*在IE6、FireFox 中 color-size:18px*/
}
#content{
color-size:14px; /*在IE5中 color-size:14px*/
}
(4)属性选择符 用于IE和Mozila/FireFox的区别
(IE不能解析该类型的语句)
例:
span .content{
color=blue; /*在IE中color=blue*/
}
span [class=content]{
color=red; /*在FireFox中color=red*/
}
(5)子对象选择符 用于IE和Mozila/FireFox的区别
(IE不能解析带该符号的语句)
span .content{
color=blue; /*在IE中color=blue*/
}
span >.content{
color=red; /*在FireFox中color=red*/
}
(6)voice-family用于IE5和IE6、Mozila/FireFox的区别
(针对残疾使用的设备进行特别设置的一种方法,IE5解析不到该符号的语句)
#content{
voice-family:”\””}\”;
voice-family:inherit;
color:red; /*IE5中 color:red*/
}
#content{
color:blue; /*IE6、FireFox中color:blue*/
voice-family:”\””}\”;
voice-family:inherit;
color:red; /*IE5中 color:red*/
}
(7)!important 用于区分IE 6和IE7
(IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.))
例:
<style>
#wrapper {
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
(8)*+html 与 *html 用于区别firefox ie6 ie7
*+html 与 *html是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
代码:
<style>
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
</style>
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明:
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
(9)