2.6 条件样式表


2.6 条件样式表

在Firefox 2中不加条件样式表的显示效果






 
在IE 6 中添加条件样式表后的显示效果




 
HTML



<html xmlns="http://www.w3.org/1999/xhtml" 
xml:lang="en" lang="en" >
 <head><title>条件样式表</title>
<meta http-equiv="Content-type" content="
text/html; charset=utf-8" />
<link rel="stylesheet" href="page.css"  
media="all"    type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6.css"   
media="all"    type="text/css" />
<![endif]-->
</head>

<body>
<h1>条件样式表</h1>
<p class="test">在IE6中,这个盒模型有边框和背景。</p>
</body>
</html>
CSS page.css
*.test  { font-size:18px; }
CSS ie6.css
*.test { border:2px solid black; background-color:gold; }

条件样式表






















问题


需要为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]>


下面几个运算符都是可用的:lteless than of equals:不大于)、ltless than:小于)、gtgreater than:大于)或者gtegreater than or equals:不小于)。你想表达等于的时候,可以省略运算符,例如<!--[if IE 7]>


如果另一个浏览器支持条件注释的话,可以用一个能识别该浏览器的常量代替IE


相关


头部元素。





标签:
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2