调整字号

该用条件样式表还是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; }

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

还没有评论,沙发空缺中……
flight