为 IE6 和非 IE6 选用不同的 CSS 文件

为什么拟这样的一个标题，而不是为不同浏览器、或不同的 IE 版本选用不同的样式文件呢，其时那些问题都不难找到。这里我主要是考虑到 IE6 与其他版本 IE(如 IE7, IE8 等)、或其他类型浏览器(像 FireFox, Opera, Chrome 和 Safari) 存在较大的差异性。IE7 与 IE8 已较接近，其他类型浏览器一般都会自动升级到较新版本，由于盗版与 XP 的因素，在国内使用 IE6 还奇怪的多。

所以在样式布局方面就有必要区分出 IE6 与非 IE6，让他们选用不同的样式文件来进行界面排版，这就是产生本文的切实目的。另外在其他非 IE6 浏览器中可以通过 CSS Hack 技术来在同一个 CSS 文件里进行统一表现。

当然、仍旧是使用条件注释的方式，就像许多编程语言的条件编译，也可说是 HTML 中的条件预处理吧，这样的：

<!--[if XXX]>
这里是正常的html代码
<![endif]-->

等会后面会大致列出条件的语法，这里用个例子来说明如何为 IE6 和非 IE6 引入不同的 CSS 文件。需要建立三个文件，分别是，test.html、ie6.css 和 non-ie6.css 文件，它们的内容依次是：

test.html

ie6.css

non-ie6.css

你可以在不同的浏览器测试一下能不能达到预期的效果，我是在各种浏览器下测试是正确的。用的 IETester 模拟的各版本 IE。在其他的浏览器，如 FireFox、Opera、Chrome 中测试时字体颜色是蓝色的。

 为了保证测试的严谨性，光在不同的浏览器里打开看到了上面的效果还不够，还需要确保在什么时候是不是真正引入了需要的 css，而不是两个都引入了，只是后一个产生的效果。你可用 Firebug 来观察引入的哪个样式文件，也可以在 test.html 里用删除的办法来验证。

比如，test.html 中引入样式文件用了三段话，在浏览器上测试时:

非 IE6 下删除后两段时显示的是黑色
在非 IE 浏览器中删除最后一段显示的是黑色
在 IE7 或 IE8 中删除中间那段时显示的是黑色

其实就是验证每一个条件判断的有效性，经我依次测试后无误，这样可以说明不同的浏览里是否加载了应得的样式文件。

最后，最后请你一定要注意的就是在判断非 IE 时用的条件是：

<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="non-ie6.css">
<!--<![endif]-->

而不是:

<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="non-ie6.css">
<![endif]-->

有两个层次的注释

附一下，基本的语法：

lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同，

比如

<!--[if gt IE 5.5]> / 如果IE版本大于5.5 /
<!--[if lte IE 6]> / 如果IE版本小于等于6 /
<!--[if !IE]> / 如果浏览器不是IE / 这个要注意用法哦，要 <!--[if !IE]><!-->dedede<!--<![endif]-->

参考：1. 让css在不同浏览器下正常运行的方法——使用条件注释