Shellway的博客

IE浏览器的CSS识别技术(CSS Hacks)

对于IE各浏览器的兼容性问题,可能很多前端设计师都会为之心烦,甚至想把IE打入十八层地狱。但是回过头来,光烦脑和抱怨是没用的,我们还是要解决这些问题。

大多数情况下,我们可以使用IE版本的条件判断注释语句(在HTML代码中,而非CSS),来区别对待每个IE版本。另外,还有很多其他方法可以针对各IE版本设置元素样式。

1. IE条件判断语句

修复各IE版本Bug最常用的方法就是用条件判断语句。如下为针对各版本的示例代码:

  • <!--[if IE 8]> = IE8
  • <!--[if lt IE 8]> = IE7及更低版本
  • <!--[if gte IE 8]> = IE8及更高版本

    <!–[if IE 8]>
    <style type=”text/css”>

    /* 这里放IE 8的CSS代码 */
    

    </style>
    <![endif]–>

    <!–[if lt IE 8]>

    &lt;link href="ie7.css" rel="stylesheet" type="text/css" /&gt;
    

    <![endif]–>`

    2. 针对各IE版本的CSS规则(IE CSS hacks)

    另一种方法就是定义仅IE一些版本可以识别的CSS规则。如在CSS规则属性名前添加星号(*)以使规则仅运用于IE7及更低版本,而下划线则针对IE6。这些方法不是正确的CSS语法,不到万不得已的情况,一般不推荐随便使用。

  • IE8 or below: 在规则语句末尾,结束分号(;)之前添加反斜杠和数字9 (\9);

  • IE7 or below: 在CSS属性名称前加英文的星号(*);
  • IE6: 在CSS属性名称前加英文下划线(_)。

    `.box {
    
        background: gray; /* 标准的规则定义 */
    
        background: pink**\9**; /* IE 8及更低版本 */
    
        *****background: green; /* IE 7 ``及更低版本`` */
    
        **_**background: blue; /* IE 6 */
    
    }
    `

    3. 条件判断中的HTML元素类(Class)

    第三种方法是Paul Irish发明的,为<html />标签添加带IE版本号的CSS类,然后用条件判断语句将元素分别添加各版本的CSS规则。此方法优点是明显的,不会导至W3C验证错误。

    `<!–[if lt IE 7 ]> <html class=”lt-ie7”> <![endif]–>
    <!–[if IE 7 ]> <htmlclass="ie7"> <![endif]–>
    <!–[if IE 8 ]> <htmlclass="ie8"> <![endif]–>
    <!–[if IE 9 ]> <htmlclass="ie8"> <![endif]–>
    <!–[if (gt IE 9)|!(IE)]><!–> <html class=”gt-ie9”> <!–<![endif]–>