尽管我们非常讨厌和IE bugs打交道,可还是要面对它,因为你的老板和访问者仍然在使用IE。由于不同版本IE的渲染引擎不一致,所以显示出来的页面也是不尽相同的,这让人感到非常沮丧。通常我们会使用有条件的注释来修复IE的问题。但其实还有更多的方法……
查看示例针对IE的CSS
一、IE注释
使用IE注释的方法也许是最常使用的解决IE bugs的方法。它可以针对不同版本的IE来使用(IE6、IE7、IE8)。以下是针对不同版本的IE的样本代码:
- <!–[if IE 8]> = IE8
- <!–[if lt IE 8]> = IE7或更低版本
- <!–[if gte IE 8]> = 高于或者等于IE8版本
8 | <link href="ie7.css" rel="stylesheet" type="text/css" /> |
二、针对Explorer的CSS规则(IE CSS Hacks)
另外一个选择是声明只有Explorer能够解析的CSS规则。比如,在CSS属性之前加上一个星号可以锁定IE7,而在属性前加上下划线会锁定IE6。但是我们并不推荐这种方法,因为它不符合CSS的语法。
- IE8或者低于IE8:要针对IE8或者低于IE8版本写CSS规则,可以在分号之前加上反斜杠和数字9。
- IE7或者低于IE7:在CSS属性前加星号。
- IE6:在属性前加下划线。
2 | background : gray ; /* 标准浏览器 */ |
3 | background : pink\ 9 ; /* IE 8以及较低版本*/ |
4 | * background : green ; /* IE 7以及较低版本*/ |
5 | _background : blue ; /* IE 6 */ |
三、有条件的HTML类
由Paul Irish创建的第三个选择,是在使用IE条件注释方法的同时,在html标签中创建由IE版本名称为一个类别的CSS类。基本上,当它检查到是IE时,会给html标签添加一个类。因此,想要锁定特定的IE版本,只需要使用IE类作为父选择器(例如:.ie6 .box)。这是一个非常聪明的办法,而且他不会引起任何的非法性错误。
1 | <!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> |
2 | <!--[if IE 7 ]> <html class="ie7"> <![endif]--> |
3 | <!--[if IE 8 ]> <html class="ie8"> <![endif]--> |
4 | <!--[if IE 9 ]> <html class="ie9"> <![endif]--> |
5 | <!--[if (gt IE 9)|!(IE)]><!--> < html > <!--<![endif]--> |
原文:CSS Specific for Internet Explorer