2.6　条件样式表-CSS-web家

主页 PHP HTML CSS JavaScript nodejs 7天nodejs 小游戏

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　DOCTYPE 2.6　条件样式表

分类

友情链接

轻松育儿世界奇观

2.6 条件样式表

2.6　条件样式表