为 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在不同浏览器下正常运行的方法——使用条件注释

本文链接 https://yanbin.blog/ie6-non-ie6-css/, 来自 隔叶黄莺 Yanbin Blog

[版权声明] Creative Commons License 本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。

Subscribe
Notify of
guest

2 Comments
Inline Feedbacks
View all comments
surfin
surfin
12 years ago

非常感谢,搜了快一个小时了 才找到