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]>。


下面几个运算符都是可用的：lte（less than of equals：不大于）、lt（less than：小于）、gt（greater than：大于）或者gte（greater than or equals：不小于）。你想表达等于的时候，可以省略运算符，例如<!--[if IE 7]>。


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


相关

头部元素。



看了再看
2.1.1 浏览器与网页的外观2.1.3 先模仿后进步2.2.2 在Dreamweaver中创建CSS—利用Dreamweaver提供的模板2.3.1 使用行内样式表2.3.3 使用外部样式表2.4 小结2.1　本章大纲2.2　HTML结构（2）2.4　DOCTYPE2.6　条件样式表
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2