该用条件样式表还是CSS hack?

本文摘自Paul Irish的博客

针对IE的种种问题,通常有几种解决方案,一种是条件样式表,也就是结合IE的条件注释来加载专用的css文件:

<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" /><![endif]-->

还有许多人用的是CSS hack:

div.infoBox { float: left; margin-left: 10px; _margin-left: 5px; }

CSS hack 可以做到不影响其他浏览器的表现,坏处就是代码无法通过校验器的校验,因为hack是不合标准的CSS代码。所以条件样式表曾经备受标准化社区的推崇,因为既能解决问题,又可以通过校验。

但条件样式表也存在一些问题:

  • 条件样式表意味着会给IE增添了一到两个额外的HTTP请求。
  • 由于条件样式表存在于head元素中,浏览器会先下载样式表,增加了页面渲染的等待时间。
  • Yahoo内部的编码最佳实践中也不推荐使用条件样式表。
  • CSS文件被分割成了多个文件,增加了以后维护的难度。

所以Paul Irish的看法是,两种都不要用。同时他推荐了一种解决方案:

<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]>    <html class="ie7"> <![endif]-->
<!--[if IE 8]>    <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->

用条件注释来给html标签添加一个额外的类,这样所有的CSS都可以写进同一个文件:

div.foo { color: inherit;}
.ie6 div.foo { color: #ff8000; }

这种方法能够通过校验,也兼容各个浏览器。

IE的CSS hack及条件注释

对于搞前端的同学们来说,实现跨浏览器的兼容,IE是一个大麻烦。可是鉴于低版本IE在国内不可忽视的占有率,我们还是需要好好掌握一些CSS hack。

总结了一些针对IE6-9的属性值hack:

.foo{
     color:green\9;    /* 所有IE */
     color:green\9\0;  /* IE9 */
     color:green \0;   /* IE9 */
     color:green\0;    /* IE8,9 */
    *color:green;      /* IE6,7 */
    +color:green;      /* IE6,7 */
    _color:green;      /* IE6 */
}

还有一种是选择器hack。对IE6可以用 * html ,如下

* html .foo{ color:green; } /* IE6可识别 */

对IE7可以用 *:first-child+html*+html

*:first-child+html .foo{ color:green; } /* IE7可识别 */
            *+html .foo{ color:green; } /* IE7可识别 */

微软推荐使用的方法则是条件注释。因为以上的hack并不是规范化的做法,无法通过 W3C 的 CSS 校验。条件注释的写法如下:
阅读全文 »

flight