本文向大家描述一下IE8 CSS hack技术的用法,IE8正式版出来有一段日子了,但是针对IE8正式版的CSS hack却很少,其实这是值得庆幸的,因为IE8修复了很多IE6和IE7的一些BUG,更加接近W3C标准。
IE8 CSS hack技术
针对IE8正式版的CSS hack目前可以找到的分为2种:
***种:”\9″:
基本的写法:
1..test{color/*\**/:blue\9}
这个IE6、IE7、IE8都能识别;但是IE8不能识别“*”和“_”的csshack;所以我们可以这样写hack:
- 1..header{width:300px;}/*所有浏览器*/
- 2..header{width/*\**/:330px\9;}/*所有浏览器IE浏览器*/
- 3..header{*width:310px;}/*IE7和IE6能识别,IE8和FF不能识别*/
- 4..header{_width:290px;}/*IE6能识别,IE7、IE8和FF不能识别*/
第二种:就是使用IE的条件注释
条件注释是IE特有的一种功能,能对IE系列产品进行单独的XHTML代码处理,注意,主要是针对XHTML,而非CSS。
条件注释功能非常强大,可以进行true和false判断,例如:
程序代码
- <!–[ifIE]>此内容只有IE可见<![endif]–>
- <!–[ifIE6.0]>此内容只有IE6.0可见<![endif]–>
条件注释能被IE判断是什么版本的浏览器,并在符合条件的情况下显示其中的内容,从IE5.0到7.0都支持注释功能,而且版本号精确到小数点后4位:
程序代码
- <!–[ifIE6.1000]>此内容只有IE6.1可见<![endif]–>
IE条件注释还支持感叹号非操作:
程序代码
- <!–[if!IE6.0]>此内容除了IE6.0版本之外都可见<![endif]–>
并且支持前缀,用于判断更高版本或是更低版本:
程序代码
- <!–[ifgtIE5.0]>此内容只有IE5.0以上版本可见<![endif]–>
这里的gt全称为greaterthan表示当前条件版本以上版本,但不包含当前版本。
还有其它几个前缀:
lt表示lessthan当前条件版本以下的版本,不包含当前版本。
gte表示greeterthanorequal当前版本以上版本,并包含当前版本。
lte表示lessthanorequal当前版本以下版本,并包含当前版本。
其他一些csshack的测试:
- 1..color1{color:#F00;color/*\**/:#00F/*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/
- 2..color2{color:#F00;color/*\**/:#00F/*\9**/}/*IE7,IE8,FF,OP,SA识别*/
- 3..color3{color:#F00;color/*\**/:#00F\9}/*IE6,IE7,IE8识别*/
- 4..color4{color:#F00;color/*\**/:#00F\9}/*IE7,IE8识别*//
- *“color”和“/*\**/”之间有个空格*/
其中:OP表示Opera,SA表示Safari
【编辑推荐】
- CSS hack技术在IE8浏览器中的应用
- 探究CSS hack使用原理 规则及弊端
- 深入探究DIV CSS布局中position属性用法
- CSS属性display:inline-block使用揭秘
- CSS hack:实现IE6、IE7、Firefox兼容