2.6 条件样式表
在Firefox 2中不加条件样式表的显示效果
![]() |
![]() |
<html xmlns="http://www.w3.org/1999/xhtml" <head><title>条件样式表</title> |
条件样式表
|
需要为IE提供一组样式,为其他浏览器提供另一组样式。 |
解决方案 |
可以使用微软IE的条件注释来载入专为IE设计的样式表。要把条件注释放在<head>中其他样式表的所有链接后面。要在条件注释中填入样式表的链接。我们把这叫做条件样式表(conditional stylesheet)。因为条件样式表是最后出现的,所以它会覆盖掉前面载入的样式。 可以为IE 6创建一个独立的条件样式表,如果必要的话,可以为IE 7再创建一个。在这个样式表中可包含一些用于弥补不同行为和bug的样式。 下面这个模式读取了两个条件样式表。第一个是为IE 6以及之前的版本。第二个是单独为IE 7的。IE 7修复了IE 6中的大部分bug,但是仍然有很多CSS功能它都不支持,例如content属性。 |
|
HTML <!--[if lte IE 6]> <link rel="stylesheet" href="ie6.css" media="all" type="text/css" /> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" href="ie7.css" media="all" type="text/css" /> <![endif]--> |
|
条件样式表只能应用于IE。这点有些遗憾,因为用它们来处理某些浏览器特有的问题是非常有效的。幸运的是,在其他浏览器中没有什么问题。我不建议使用CSS hack(招数),因为它们会依赖浏览器的CSS引擎对错误的解析方式。当这些错误被修复后,hack便不会再起作用。因此,我不在本书中使用或讨论任何有关CSS hack的内容。换句话说,本书中所有设计模式的运行都与hack无关。 |
变种 |
针对不同版本的IE,可以改变条件注释中的运算符和版本。举个例子,可以使用<!--[if lt IE 5]>或者<!--[if IE 7]>。 下面几个运算符都是可用的:lte(less than of equals:不大于)、lt(less than:小于)、gt(greater than:大于)或者gte(greater than or equals:不小于)。你想表达等于的时候,可以省略运算符,例如<!--[if IE 7]>。 如果另一个浏览器支持条件注释的话,可以用一个能识别该浏览器的常量代替IE。 |
|
头部元素。 |